Shulou(Shulou.com)05/31 Report--

This article mainly explains "what does css selectors mean". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what does css selectors mean?"

Css selectors refers to the css selector, which specifies which elements the CSS rules will be applied to, and a batch of elements on the element tree can be selected based on some characteristics. Css selector can be divided into: basic selector, combination selector, attribute selector, pseudo-class, pseudo-element, sibling element universal selector and so on.

The operating environment of this tutorial: windows7 system, CSS3 version, Dell G3 computer.

The basic meaning of the CSS selector (selectors) is to select a batch of elements on the element tree based on some characteristics.

The CSS selector specifies to which elements the CSS rule will be applied.

1. Basic selector

The meaning of serial number selector 1.* Universal element selector, matching any element 2.e tag selector, matching all element 3..infoclass selector using E tag, matching all element 4.#footerid selector containing info in class attribute, matching all elements whose id attribute is equal to footer

Example:

* {margin:0; padding:0;} p {font-size:2em;}. Info {background:#ff0;} p.info {background:#ff0;} p.info.error {color:#900; font-weight:bold;} # info {background:#ff0;} p#info {background:#ff0;}

Second, the combination selector of multi-elements

The meaning of sequence number selector 5.Erecom F multi-element selector matches all E elements or F elements at the same time. 6.E F descendant element selectors are separated between E and F by commas, matching all F elements that belong to the descendants of E elements. 7.e > F child element selectors are separated by spaces between E and F, matching all E element child elements F8.E + F adjacent element selector. Match all sibling element F immediately after element E

Example:

Div p {color:#f00;} # nav li {display:inline;} # nav a {font-weight:bold;} div > strong {color:#f00;} p + p {color:#f00;}

3. CSS 2.1attribute selector

The meaning of the ordinal selector 9.E [att] matches all E elements with the att attribute, regardless of its value. (note: e can be omitted here, such as "[cheacked]". The following is the same. ) 10.E [att=val] matches all E elements where the att attribute is equal to "val" 11.E [att~=val] matches all att attributes with multiple space separated values, one of which is equal to "val". E element 12.E [att | = val] matches all att attributes with multiple hyphen separated (hyphen-separated) values, one of which starts with "val", mainly for lang attributes. Such as "en", "en-us", "en-gb" and so on.

Example:

P [title] {color:#f00;} div [class=error] {color:#f00;} td [headers~=col1] {color:#f00;} p [lang | = en] {color:#f00;} blockquote [class=quote] [cite] {color:#f00;}

Fourth, pseudo-classes in CSS 2.1,

Serial number selector meaning 13.E:first-child matches the first child element of the parent element 14.E:link matches all unclicked links 15.E:visited matches all clicked links 16.E:active matching mouse has been pressed, The E element 17.E:hover that has not been released matches the E element over which the mouse hovers 18.E:focus matches the E element that gets the current focus 19.E:lang (c) matches the E element whose lang attribute is equal to c

Example:

P:first-child {font-style:italic;} input [type=text]: focus {color:#000; background:#ffe;} input [type=text]: focus:hover {background:#fff;} q:lang (sv) {quotes: "\ 201D"\ 201D "\ 2019"\ 2019";}

5. Pseudo elements in CSS 2.1,

Serial number selector meaning 20.E:first-line matches the first line of the E element 21.E:first-letter matches the first letter of the E element 22.E:before inserts the generated content before the E element 23.E:after inserts the generated content after the E element

Example:

P:first-line {font-weight:bold; color;#600;}. Preamble:first-letter {font-size:1.5em; font-weight:bold;}. Cbb:before {content: "; display:block; height:17px; width:18px; background:url (top.png) no-repeat 00; margin:0 00-18px;} a:link:after {content:" ("attr (href)") ";}

VI. Universal selector for sibling elements of CSS 3

Sequence number selector meaning 24.E ~ F matches any sibling F element after E element

Example:

P ~ ul {background:#ff0;}

7. CSS 3 attribute selector

Serial number selector meaning 25.E [at ^ = "val"] attribute att whose value begins with "val" 26.E [att $= "val"] attribute att whose value ends with "val" 27.E [att * = "val"] attribute att contains the element of "val" string

Example:

Div [id ^ = "nav"] {background:#ff0;}

VIII. Pseudo classes related to user interface in CSS 3

The meaning of the ordinal selector 28.E:enabled matches the element activated in the 29.E:disabled matching form the disabled element 30.E:checked matches the selected radio (checkbox) or checkbox (check box) element 31.E::selection matches the element currently selected by the user

Example:

Input [type= "text"]: disabled {background:#ddd;}

IX. Structural pseudo-classes in CSS 3

The ordinal selector means that 32.E:root matches the root element of the document. For HTML documents, the HTML element 33.E:nth-child (n) matches the nth child element of its parent element, the first number 134.E:nth-last-child (n) matches the penultimate child element of its parent element, and the first number 135.E:nth-of-type (n) has the same effect as: nth-child (). But matching only elements that use the same tag 36.E:nth-last-of-type (n) is similar to: nth-last-child (), but only matching elements using the same tag 37.E:last-child matches the last child of the parent element, which is equivalent to: nth-last-child (1) 38.E:first-of-type matches the first child element of the same tag under the parent element Equivalent to: nth-of-type (1) 39.E:last-of-type matches the last child element under the parent element using the same tag, equivalent to: nth-last-of-type (1) 40.E:only-child matches the only child element under the parent element Equivalent to: first-child:last-child or: nth-child (1): nth-last-child (1) 41.E:only-of-type matches the only child element using the same tag under the parent element, equivalent to: first-of-type:last-of-type or: nth-of-type (1): nth-last-of-type (1) 42.E:empty matches an element that does not contain any child elements. Note that the text node is also regarded as a child element.

Example:

P:nth-child (3) {color:#f00;} p:nth-child (odd) {color:#f00;} p:nth-child (even) {color:#f00;} p:nth-child (3n+0) {color:#f00;} p:nth-child (3n) {color:#f00;} tr:nth-child (2n+11) {background:#ff0;} tr:nth-last-child (2) {background:#ff0;} p:last-child {background:#ff0 } p:only-child {background:#ff0;} p:empty {background:#ff0;}

10. Inverted pseudo-class of CSS 3

Sequence number selector meaning 43.E:not (s) matches any element that does not match the current selector

Example:

: not (p) {border:1px solid # ccc;}

11. Target pseudo-class in CSS 3

The meaning of the serial number selector 44.E:target matches the effect of a specific "id" in the document so far, I believe you have a deeper understanding of "what css selectors refers to", you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.