Turn: CSS selector notes

Source: Internet
Author: User

Suddenly I saw the strange CSS format written by others. I couldn't understand it. I checked it and found that there were many selector types, and I turned it over. Original article address

Note is divided into two parts: Today is the CSS selector, and later there is a part of the XPath selector. Today's note contains 44 selectors, basically covering all the rules of CSS 2 and CSS 3.

==================================

CSS selector notes

Ruan Yifeng

I. Basic Selector

Serial number Selector Description
1. * Common Element selector, matching any element
2. E Tag selector that matches all elements using the E tag
3. . Info The class selector matches all elements in the class attribute that contain info.
4. # Footer Id selector, matching all elements whose ID attribute is equal to footer

Instance:

* {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 ;}

2. Multi-element combination Selector

Serial number Selector Description
5. E, F Multi-element selector that matches all Eelements or f elements simultaneously. Separate E and F with commas (,).
6. E F The descendant element selector matches all f elements belonging to the descendant of the Eelement. E and F are separated by spaces.
7. E> F Child element selector, matching the child element F of all eElements
8. E + F

Adjacent to the element selector, matching all elements of the same level F that follow the Eelement

More accurately:

E + F is adjacent to the element selector and matches all the first element of the same level following the E element F.

Instance:

Div P {color: # f00 ;}

# Nav Li {display: inline ;}

# Nav A {font-weight: bold ;}

Div> strong {color: # f00 ;}

P + P {color: # f00 ;}

Iii. CSS 2.1 attribute Selector

Serial number Selector Description
9. E [ATT] Matches all the eElements with the ATT attribute, regardless of its value. (Note: E can be omitted here, for example, "[cheacked]". .)
10. E [ATT = Val] Matches all the eElements whose ATT attribute is equal to "Val ".
11. E [ATT ~ = Val] Matches all ATT attributes with values separated by multiple spaces, and an Eelement whose values are equal to "Val"
12. E [ATT | = Val] Matches all ATT attributes with values separated by font numbers (hyphen-separated), and an Eelement whose values start with "Val", which is mainly used for the lang attribute, for example, "en", "En-us", and "En-GB"

Instance:

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 ;}

Iv. pseudo classes in CSS 2.1

Serial number Selector Description
13. E: First-child

Match the first child element of the parent Element

Exactly match the first child element with the E tag of the parent element.

14. E: Link Match All unclicked links
15. E: visited Match all clicked links
16. E: Active Match the Eelement that has been pressed and not released by the mouse
17. E: hover Matching the Eelement on which the mouse is hovering
18. E: Focus Matches the Eelement that obtains the current focus
19. E: Lang (c) Matches an Eelement whose Lang property is equal to C.

Instance:

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 Description
20. E: first-line Match the first line of the Eelement
21. E: First-letter Match the first letter of the Eelement
22. E: before Insert the generated content before the Eelement
23. E: After Insert the generated content after the Eelement

Instance:

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 0 0; margin: 0 0 0-18px ;}

A: Link: After {content: "(" ATTR (href )")";}

6. General selector of the same level element of CSS 3

Serial number Selector Description
24. E ~ F Matches any F element at the same level after the Eelement

Instance:

P ~ Ul {Background: # ff0 ;}

VII. CSS 3 attribute Selector

Serial number Selector Description
25. E [ATT ^ = "Val"] Element whose attribute ATT value starts with "Val"
26. E [ATT $ = "Val"] Element whose attribute ATT value ends with "Val"
27. E [ATT * = "Val"] The value of the attribute ATT contains elements of the "Val" string.

Instance:

Div [ID ^ = "nav"] {Background: # ff0 ;}

8. pseudo classes related to user interfaces in CSS 3

Serial number Selector Description
28. E: Enabled Matches the activated elements in the form.
29. E: Disabled Match the disabled elements in the form
30. E: checked Match the selected radio or checkbox elements in the form.
31. E: Selection Matches the currently selected element of the user.

Instance:

Input [type = "text"]: Disabled {Background: # DDD ;}

9. structural pseudo classes in CSS 3

Serial number Selector Description
32. E: Root Matches the root element of a document. For an HTML document, it is an HTML element.
33. E: Nth-child (N) Matches the nth child element of the parent element. The first child element is 1.
34. E: Nth-last-child (N) Matches the nth child element of the parent element. The first child element is 1.
35. E: Nth-of-type (n) Similar to: Nth-child (), but only matches the elements that use the same label.
36. E: Nth-last-of-type (n) Similar to Nth-last-child (), but only matches the elements that use the same label.
37. E: Last-child Matches the last child element of the parent element, which is equivalent to Nth-last-Child (1)
38. E: first-of-type Match the first child element that uses the same label under the parent element, equivalent to: Nth-of-type (1)
39. E: Last-of-type Match the last child element that uses the same label under the parent element, equivalent to: Nth-last-of-type (1)
40. E: Only-Child Matches only one child element under the parent element, which is equivalent to: First-child: Last-child or: Nth-Child (1): Nth-last-Child (1)
41. E: only-of-type Match the unique sub-element that uses the same label under the parent element, which is equivalent to: First-of-type: Last-of-type or: Nth-of-type (1 ): nth-last-of-type (1)
42. E: empty Match an element that does not contain any child element. Note that text nodes are also considered as child elements.

Instance:

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. Reverse Selection of pseudo classes in CSS 3

Serial number Selector Description
43. E: Not (s) Matches any element that does not match the current selector.

Instance:

: Not (p) {border: 1px solid # CCC ;}

11. Target pseudo class in CSS 3

Serial number Selector Description
44. E: Target Matching the effect of clicking "ID" in the document

Please refer to the detailed explanation and examples of this selector on HTML dog.

(End)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.