Go to CSS Selector

CSS is one of the most powerful tools available to Web designers. Using it we can change the interface of a website in a few minutes without changing the label of the page. But despite the fact that each of us realizes that it is useful, CSS selectors are far from their potential, and sometimes we tend to use too many and useless classes, IDs, Div, span, etc. to make our HTML messy.

The best way to avoid having these "plagues" spread in your tags and keep them concise and semantically is to use more complex CSS selectors that can be positioned on the specified element without using an extra class or ID, and in this way can make our code and style more flexible.

First, the basic selector

Selector Selector	Describe	CSS version
E	Tag selector that matches all elements that use the e tag
*	Universal element selector to match any element
. info	Class selector that matches all elements of the class attribute that contain info
#footer	ID selector that matches all elements of the id attribute equal to footer

Like what:

1 * {margin:0; padding:0;}
2
3 p {font-size:2em;}
4
5. Info {background: #ff0;}
6
7 P.info {background: #ff0;}
8
9 P.info.error {color: #900; font-weight:bold;}
10
P#info {background: #ff0;}

Two, multi-element combination Selector

Selector Selector	Describe	CSS version
E,f	Multi-element selector that matches all E or F elements, separated by commas between E and F
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
E>f	child element Selector, matching all e element's son element f
E+f	Adjacent element selector, matching all sibling elements immediately following the E element f
E~f	Match any of the E tags after the sibling f tag	3

Like what:

1 div,p {color: #f00;}
2 #nav, Li {display:inline;}
3 #nav a {font-weight:bold;}
4 Div>strong {color: #f00;}
5 p+p {color: #f00;}
6 P~ul {color: #f00;}

1. Parallel selector (e,f,g,... ）

These selectors are separated by commas to match all tag elements listed by the selector.

2. Descendant selector (E F; E>F)

e F, the label is separated by a space, to match all the F tags within the e tag, the matching F tag is not only the son of e-tag, but also may be e-tagged grandson, or great-grandchildren, from the sun and so on.

The e>f tag matches all F tags for the e tag son.

3. Brother Selector (E+F;E~F)

E~f Select where F tags do not need to follow the e tag tightly after the first, if you need to implement such a function can be used e+f selector. This selector is only supported for IE browsers with IE6 or more versions.

Third, attribute selector

Selector Selector	Describe	CSS version
E[attribute]	Matches all e elements that have the attribute attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". to the same. ）	2.1
E[attribute=value]	Match all E elements that have the attribute attribute equal to "value"	2.1
E[attribute~=value]	Matches all attribute attributes that have multiple space-delimited values, where one value equals "value" of the E element	2.1
E[attribute|=value]	Match this type of e element, which has the attribute attribute is "value" or start with "value" and immediately follow a "-" character, that is, "value-", mainly for the lang attribute, such as "en", "in en", "EN-GB" and so on	2.1
E[attribute^=value]	Match all attribute attribute values are e elements that begin with "value"	3
E[attribute*=value]	Match all attribute attribute values containing the E element with "value"	3
E[attribute$=value]	Match all attribute attribute values are e elements that end with "value"	3

Like what:

1 P[title] {color: #f00;}
2
3 Div[class=error] {color: #f00;}
4
5 Td[headers~=col1] {color: #f00;}
6
7 p[lang|=en] {color: #f00;}
8
9 Blockquote[class=quote][cite] {color: #f00;}
10
Div[id^= "Nav"] {background: #ff0;}
12
Div[id$= "Nav"] {background: #ff0;}
14
15
a[href*= ". jpg"] {
Background:url (jpeg.gif) no-repeat left 50%;
padding:2px 0 2px 20px;
19}
20

Four, pseudo-class selector

Selector Selector	Describe	CSS version
E:first-child	Matches the first child element of a parent element E	2.1
E:link	Match all the links that have not been clicked	2.1
e:visited	Match all clicked Links	2.1
E:active	Matches the E element on which the mouse has been pressed and not released	2.1
E:hover	Match the E element on which the mouse hovers	2.1
E:focus	Matches the E element that obtains the current focus	2.1
E:lang (c)	The e element that matches the lang attribute equals C	2.1
E:enabled	Match elements that are activated in the form	3
E:disabled	Match disabled elements in a form	3
E:checked	Match selected radio or CheckBox elements in a form	3
E::selection	Matches the element currently selected by the user	3
E:root	Matches the root element of the document, which is the HTML element for the HTML document	3
E:nth-child (N)	Matches the nth child element of its parent element, and N is calculated from 1	3
E:nth-last-child (N)	Matches the reciprocal nth child element of its parent element, the first number is 1	3
E:nth-of-type (N)	Similar to: Nth-child (n), used as a match for the nth element using the same label	3
E:nth-last-of-type	Similar to: Nth-last-child function, used as the last element to match the same label	3
E:last-child	Matches the last child element of the parent element, equivalent to E:nth-last-child (1)	3
E:first-of-type	Match the first element under a parent element with the same label, equivalent to E:nth-of-type (1)	3
E:last-of-type	Match the last element of the same label under the parent element, equivalent to E:nth-last-of-type (1)	3
E:only-child	Matches only one child element under the parent element, equivalent to E:first-child:last-child or E:nth-child (1): Nth-last-child (1)	3
E:only-of-type	Matches only one child element with the same label under the parent element, equivalent to E:first-of-type:last-of-type or E:nth-of-type (1): Nth-last-of-type (1)	3
E:empty	Match an element that does not contain any child elements, note that the text node is also considered a child element	3
E:not (s)	Matches any e-label element that does not conform to the current selector	3
E:target	Matches the effect of a specific "id" click in a Document	3

1, E:first-child

You can use the: First-child pseudo-class to select the first child element of an element. This particular pseudo-class is easily misunderstood, so it is necessary to give an example. In the following example, the selector matches the P element as the first child element of any element (that is, p in line 11th, not the strong element):

1 2 3 <style type= "Text/css" >
4 P:first-child
5 {
6 color:red;
7}
8 </style>
9 Ten <body>
<p>123123<strong>some text</strong></p>
<p>some text</p>
</body>

The most common mistake is to assume that a selector such as P:first-child chooses the first child element of the P element. For IE browser, you must declare <! Doctype>, so that: First-child can take effect in ie6+. Another problem is that sometimes an ASPX file is created, as follows:

1 <%@ page language= "C #" autoeventwireup= "true" codefile= "Default21.aspx.cs" inherits= "Default21"%>
2
3 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4
5 6 7 <title></title>
8 <style type= "Text/css" >
9 P:first-child
10 {
One by one background-color:red;
12}
</style>
<body>
<form id= "Form1" runat= "Server" >
<p>
18 123123123123123123
</p>
</form>
</body>
run up to find that the font color is not red, why? In fact, this p is not the first element. We can look at the HTML generated after the page is running, so the problem is clear. &NBSP;
2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
3 
4  5  6 
7 </title>
8 <style type= "Text/css";
9 p: First-child
10 {
11 background-color:red;
12 }
13 </style>
14  15 <body>
16 <form  Name= "Form1"  method= "Post"  action= "default21.aspx"  id= "Form1";
17 <div>
18  <input type= "hidden"  name= "__viewstate"  id= "__viewstate" value= "/ wepdwullte2mty2odcymjlkzk7s3d9mopxno2l9sjnvyvvw+q5v "/>
19 </div>
20 
21 <p
22 123123123123123123
23 </p>
24 </form>
25 </body>
26 

2. Dynamic Pseudo-Class

The so-called dynamic pseudo-class means that they do not exist in HTML, but only when the user interacts with the site. E:link, e:visited, E:hover, e:active and e:focus all belong to this category, the front four kinds of anchor pseudo-class.

In CSS definitions, a:hover must be placed after A:link and a:visited to be valid. A:active must be placed after a:hover to be effective. The pseudo-class name is not case sensitive.

Dynamic pseudo-classes are supported by all modern browsers, even IE6. Note, however, that for IE series browsers, IE6 only allows: the hover pseudo-class is applied to the link element (a label), and only IE8 accepts the: Active state applied to non-a tags.

1 a:link {color: #FF0000}/* link not visited */
2 a:visited {color: #00FF00}/* visited link */
3 a:hover {color: #FF00FF}/* mouse move to link */
4 a:active {color: #0000FF}/* selected Link */
5 Input:hover {background-color:blue}/* only works on ie6+ or Firefox */
6 Input:active {background-color:green}/* only works on IE8 or Firefox */

3,: lang Pseudo-class

Language pseudo-class: lang gives you the ability to define special rules for different languages. In the following example, the Lang class defines the type of quotation marks for the Q element with a property value of No:

1 2 3
4 <style type= "Text/css" >
5 Q:lang (NO)
6 {
7 Quotes: "~" "~"
8}
9 </style>
10
12
<body>
<p> text <q lang= "No" > text referenced in paragraph </q> text </p>
</body>

4. UI element State Pseudo-class

Some HTML elements have an enable or disabled state (for example, a text input box) and a checked or unchecked status (radio buttons and checkboxes). These states can be used : Enabled,:d isabled , or : Checked Pseudo-class to locate separately.

1 input:enabled
2 {
3 background-color:red;
4}
5 input:disabled
6 {
7 Background-color:yellow;
8}
9 input[type= "checkbox"]:checked {
Ten margin-left:15px;
11}

This type of selection is supported by browsers other than IE browsers.

5, E::selection

Currently, there is no IE or Firefox browser support:: Selection pseudo-elements. Both Safari, Opera and Chrome are supported.

Div:selection
2 {
3 Background-color:green;
4}

6. Structure pseudo-Class selector

These selectors include E:root, E:nth-child (n), E:nth-last-child (n), E:nth-of-type (n), E:nth-last-of-type (n), E:last-child, E: First-of-type, E:last-of-type, E:only-child, E:only-of-type and E:empty. The fabric pseudo-class is not supported by Internet Explorer (until version 8.0). Firefox, Safari, and opera support these selectors in their latest version of the browser.

1 P:nth-child (3) {color: #f00;}
2
3 P:nth-child (odd) {color: #f00;}
4
5 P:nth-child (even) {color: #f00;}
6
7 P:nth-child (3n+0) {color: #f00;}
8
9 P:nth-child (3n) {color: #f00;}
10
Tr:nth-child (2n+11) {background: #ff0;}
12
Tr:nth-last-child (2) {background: #ff0;}
14
P:last-child {background: #ff0;}
16
P:only-child {background: #ff0;}
18
P:empty {background: #ff0;}

7. Negative Selector

Negative selector: not (), which allows you to locate an element that does not match the selector

For example, if you need to define input elements in a form element, but don't want to include the input of the submit type, it's often useful-you want them to have different styles to look like buttons:

1 Input:not ([type= "submit"])
2 {
3 width:200px;
4 padding:3px;
5 border:1px solid #000000;
6}

Internet Explorer does not support this selector.

8.: Target Selector

When you use an anchor point (fragment identifier fragment identifier), for example, http://www.smashingmagazine.com/2009/08/02/ bauhaus-ninety-years-of-inspiration/#comments, this "#comments" is a fragment identifier, and you can use the: Target pseudo-class to control the object's style.

For example, you have a very long page that uses a lot of text and H2 titles, and then you have an index of those headings on the head of the page. If you click a link in the index, the title is highlighted in some way and then scrolled to the appropriate location, which is useful for the reader. Very simple.

1 <%@ page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
2
3 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4 5 6 <title></title>
7 <style>
8:target
9 {
Ten background-color:red
11}
</style>
<body>
<form id= "Form1" runat= "Server" >
<a href= "#label" >text to be displayed</a>
</form>
</body>

IE is not supported at all: Target pseudo class, another small problem is that opera does not support the selector when using the forward and Back buttons. However, the selector is supported by various other mainstream browsers.

Five, pseudo-element selector

Selector Selector	Describe	CSS version
E:first-line	Matches the first line in all E-tags	2.1
E:first-letter	Matches the first letter in all E-tags	2.1
E:before	Insert the generated content before the e tag	2.1
E:after	Insert the generated content after the e tag	2.1

1,: first-line pseudo-elements

The "first-line" pseudo-element is used to add a special style to the first line of text in a selector:

1 p {font-size:12pt}
2 P:first-line {color: #0000FF; Font-variant:small-caps}
3
4 <p>some text, ends up on, or more lines</p>
5

In the example above, the browser displays the first line formatted according to the First-line pseudo-element. Browsers rely on the size of the browser window to branch. First-line Pseudo-elements can only be used for block-level elements.

2,: first-letter pseudo-elements

The First-letter pseudo-element is used to add a special style to the first letter of text in a selector:

1 p {font-size:12pt}
2 P:first-letter {font-size:200%; Float:left}
3
4 <p>the First words of an article.</p>

3,: Before and: after pseudo element

Before pseudo-elements can be used to insert certain content before an element. The after pseudo-class can be used to insert some content after an element. These two pseudo-elements often use only the content property to add some phrases or typographic elements.

1 P:before
2 {
3 content: "Before P";
4}
5 P:after
6 {
7 content: "After P.";
8} There is actually another usage that is used as a count:1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
2 3 4 <style type= "Text/css" >
5 body {counter-reset:section;}
6 h1 {counter-reset:subsection;}
7 H1:before
8 {
9 counter-increment:section;
Content: "section" Counter ".";
11}
H2:before
13 {
Counter-increment:subsection;
Content:counter (section) "." Counter (subsection) "";
16}
</style>
19
<body>
21st
<p><b> Note:</b> if specified! DOCTYPE, Internet Explorer 8 (and later versions) supports the Counter-increment property. </p>
23
28
32
36
Panax Notoginseng </body>
39 of course, Firefox supports both pseudo-elements, and for IE browsers, if they are already specified! DOCTYPE, then IE8 (and later) are supported.

Go to CSS Selector