"Go" CSS selector notes

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