Shulou(Shulou.com)06/03 Report--

This article mainly introduces "which css3 selectors". In daily operation, I believe many people have doubts about which css3 selectors. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "which css3 selectors"! Next, please follow the editor to study!

One: attribute selector

[attr=val]: attribute attr is val

[attr*=val]: property attr contains val

[attr^ = val]: property attr begins with val

[attr$=val]: attribute attr ends with val

Two: pseudo-class selector

First-line, which uses the style for the first line of text in an element.

First-letter, using the style for the first letter (European and American characters) or the first character (Chinese or Japanese characters, etc.) of the text in an element.

: before, insert something before an element.

For example: .gys: before {Dr. content:' thinking';}

: after, insert content after an element.

: root, valid text area, that is, html area

Example: root {background:'red';}

Body {background: "yellow";}

At this point, the background of the whole page will turn yellow, and the background color of the text area will be red.

: not, excluding unwanted child elements

For example, all child elements in body *: not (H2) {color:red;} / / body are excluded at that time.

: empty, the style used when the content of the element is blank.

Target, after jumping to this link, execute the style.

For example:

111111111111

222222222222222

1111111111111111

222222222222

# test1:target {background-color:#000;} / / background color changes when jumping to id=test1

: first-child, the first child element

: last-child, the last child element

: nth-child (n), which specifies the child element of the nth of the parent element. if n is a child element of the odd even sequence, the child element of the even technology sequence

: nth-last-child (n), which specifies the child element of the penultimate n of the parent element, if n is a child element of the odd even sequence, and a child element of the even cardinality sequence

: nth-of-type (n), specifying the specified n.

: nth-of-last-type (n), which specifies the element of the penultimate n of the same type.

Nth-child (an+i), recycle the style.

For example: li:nth-child (4n+1) {color:red;}

Li:nth-child {4n+2} {color:bluee;}

Li:nth-child (4n+3) {color:yellow;}

Li:nth-child (4n+4) {color:black;}

: only-child, used when there is only one child element in the parent element.

For example: li:only-child {color:red;}

Third, form pseudo-class selector

: the active element is activated (the mouse is not lifted yet)

When focus gets focus

: hover, mouse hovering over the element

For example: input [type = 'text']: active {color:#F00;}

Input [type = 'text']: focus {color:#F00; background-color:#960;}

Input [type = 'text']: hover {color:#0F0;}

: enabled, the element is in the available state

: disabled, element is in an unavailable state

: read-only, the element is read-only

: read-write, the element is not read-only

: checked, the style in the form when the radio or checkbox check box is selected

Default, the style of the checkbox or check box that is selected by default when the page is opened.

: indeterminate, used to specify that when a page is opened, if any of the check boxes in a group of radio boxes do not set the style of the full rent check box when selected, if the user selects any of the check boxes, the style is unspecified. Currently, only opera support is used.

: selection, but what the element looks like when it is selected.

At this point, the study of "what css3 selectors are there" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.