jquery CSS Selector notes _jquery

Last year when I was learning jquery, I used to have a little selector (selector) notes.

These days took out a look, found a lot have forgotten. So, I decided to post them here for easy viewing later. This should also be useful to other friends, after all, the selector is the first step to make the 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, which basically cover all the rules of CSS 2 and CSS 3.

Serial number	Selector	Meaning
1.	*	Universal element Selector, matching any element
2.	E	Tag Selector, matching all elements with e tags
3.	. info	Class selector that matches the elements in all class attributes that contain info
4.	#footer	ID selector that matches all elements of the id attribute equal to footer

Instance:

Copy Code code as follows:

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

Combination selector with multiple elements

Serial number	Selector	Meaning
5.	E,f	Multi-element Selector, matching all E or F elements, separated by commas between E and F
6.	E F	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 child element f of all E elements
8.	E + F	An adjacent element selector that matches all of the sibling elements F immediately following the E element

Instance:

Copy Code code as follows:

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	Meaning
9.	E[att]	Matches all e elements with the ATT attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". To the same below. ）
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 with one value equal to "Val" of the E element
12.	E[att|=val]	Matches all ATT properties with multiple hyphen-delimited (hyphen-separated) values with one of the e elements starting with "Val", mainly for the lang attribute, such as "en", "en-us", "EN-GB", and so on

Instance:

Copy Code code as follows:

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

Four, the pseudo class in CSS 2.1

Serial number	Selector	Meaning
13.	E:first-child	Matches the first child element of a parent element
14.	E:link	Match all links that have not been clicked
15.	e:visited	Match all links that have been clicked
16.	E:active	Matches an e element that has been pressed and not released by the mouse
17.	E:hover	Match the E element on the mouse hover
18.	E:focus	Matches the E element that obtains the current focus
19.	E:lang (c)	Matches the lang attribute equal to the e element of C

Instance:

Copy Code code as follows:

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

Five, pseudo element in CSS 2.1

Serial number	Selector	Meaning
20.	E:first-line	Match the first line of the E element
21st.	E:first-letter	Match the first letter of the 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:

Copy Code code as follows:

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

Six, CSS 3, sibling elements Universal Selector

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

Instance:

Copy Code code as follows:

P ~ ul {background: #ff0;}

Seven, CSS 3 property Selector

Serial number	Selector	Meaning
25.	E[att^= "Val"]	element with the value of the property att that begins with "Val"
26.	E[att$= "Val"]	Attribute att an element that ends with "Val"
27.	E[att*= "Val"]	The value of the property att contains elements of the "Val" string

Instance:

Copy Code code as follows:

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

Viii. user interface-related pseudo classes in CSS 3

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

Instance:

Copy Code code as follows:

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

Nine, the structural pseudo class in CSS 3

Serial number	Selector	Meaning
32.	E:root	Matches the root element of the document, and for HTML documents, HTML elements
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 penultimate 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	Match the last child element of the parent element, equivalent to: Nth-last-child (1)
38.	E:first-of-type	Matches the first child element with the same label under the parent element, equivalent to: Nth-of-type (1)
39.	E:last-of-type	Matches the last child element of the same label under the parent element, 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 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	Matches an element that does not contain any child elements, note that the text node is also considered a child element

Instance:

Copy Code code as follows:

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

Ten, the anti-select pseudo class of CSS 3

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

Instance:

Copy Code code as follows:

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

Xi.: Target pseudo class in CSS 3

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

Refer to the HTML dog on the selector Explain in detailAnd instance。
Finish