"Go" CSS selector notes

Source: Internet
Author: User
Tags vcard

Nanyi

Date: March 12, 2009

Source: http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

Last year, when I was studying jquery, I used to make a few selector notes.

These days took out to see a bit, found a lot of forgotten. So, I decided to post them here for easy viewing later. This should also be useful for other friends, after all, the selector is the first step in making a Web page effect.

The notes are divided into two parts, today is the CSS selector, and later there is a part of the XPath selector. Today's notes include 44 selectors that basically cover all the rules of CSS 2 and CSS 3.

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

CSS Selector notes

Nanyi Finishing

Reference URL: 456 Berea Street

First, the basic selector

Serial number Selector Selector Meaning
1. * Universal element selector to match any element
2. E Tag selector that matches all elements that use the e tag
3. . info Class selector that matches all elements of the class attribute that contain info
4. #footer ID selector that matches all elements of the id attribute 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;}

Two, multi-element combination Selector

Serial number Selector Selector Meaning
5. E,f A multi-element selector that matches all E or F elements, separated by commas between E and F
6. E F A descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F
7. E > F child element Selector, matching all e element's child elements F
8. E + F Adjacent element selector, matching all sibling elements immediately 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;}

Third, CSS 2.1 property Selector

Serial number Selector Selector Meaning
9. E[att] Matches all e elements that have the ATT attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". to the same. )
10. E[att=val] Matches the e element of all ATT attributes equal to "Val"
11. E[att~=val] Match all ATT properties with multiple space-delimited values, where one value equals "Val" of the E element
12. E[att|=val] Matches all ATT attributes with multiple hyphen-delimited (hyphen-separated) values, an E element whose value begins with "Val", primarily for the lang attribute, such as "en", "en-us", "EN-GB", and so on

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 Selector Meaning
13. E:first-child Matches the first child element of a parent element
14. E:link Match all the links that have not been clicked
15. e:visited Match all clicked Links
16. E:active Matches the E element on which the mouse has been pressed and not released
17. E:hover Match the E element on which the mouse hovers
18. E:focus Matches the E element that obtains the current focus
19. E:lang (c) The e element that matches the lang attribute equals 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";}

V. Pseudo-Elements in CSS 2.1

Serial number Selector Selector Meaning
20. E:first-line Match the first line of the E element
21st. E:first-letter Matches the first letter of an E element
22. E:before Insert the generated content before the E element
23. E:after Insert the generated content after the E element

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

Vi. common selector for sibling elements of CSS 3

Serial number Selector Selector Meaning
24. E ~ F Matches any of the sibling F elements after the E element

Instance:

P ~ ul {background: #ff0;}

Vii. CSS 3 Property Selector

Serial number Selector Selector Meaning
25. E[att^= "Val"] An element with the value of a property att that begins with "Val"
26. E[att$= "Val"] An element with the value of a property att ending with "Val"
27. E[att*= "Val"] The value of the attribute att contains the element of the "Val" string

Instance:

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

Viii. CSS 3 pseudo-classes related to the user interface

Serial number Selector Selector Meaning
28. E:enabled Match elements that are activated in the form
29. E:disabled Match disabled elements in a form
30. E:checked Match selected radio (radio box) or checkbox (check box) elements in a form
31. E::selection Matches the element currently selected by the user

Instance:

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

Ix. structural pseudo-classes in CSS 3

Serial number Selector Selector Meaning
32. E:root Matches the root element of the document, which is the HTML element for the HTML document
33. E:nth-child (N) Matches the nth child element of its parent element, the first number is 1
34. E:nth-last-child (N) Matches the reciprocal nth child element of its parent element, the first number is 1
35. E:nth-of-type (N) Similar to: Nth-child (), but only matches elements that use the same label
36. E:nth-last-of-type (N) Similar to: Nth-last-child (), but only matches elements that use the same label
37. E:last-child Matches the last child element of the parent element, equivalent to: Nth-last-child (1)
38. E:first-of-type Match the first child element of the same label under the parent element, equivalent to: Nth-of-type (1)
39. E:last-of-type Match the last child element of the same label under the parent element, equivalent to: Nth-last-of-type (1)
40. E:only-child Matches only one child element under a parent element, equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1)
41. E:only-of-type Match the only child element that uses the same label 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 Match an element that does not contain any child elements, note that the text node is also considered a child element

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

X. Anti-selection pseudo-class for CSS 3

Serial number Selector Selector Meaning
43. E:not (s) Matches any element that does not conform to the current selector

Instance:

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

Xi. CSS 3: Target Pseudo-class

Serial number Selector Selector Meaning
44. E:target Matches the effect of a specific "id" click in a Document

See detailed explanations and examples of this selector on the HTML dog.

Finish

"Go" CSS selector notes

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.