About CSS Selectors

Today just opened a blog, introduce yourself, Mike, the university did not volunteer to run to a training institute for two years, 2012 debut, the work process is bumpy, not much said, anyway, ultimately choose from
The work of the Web front end.
Combined with the work and study of the debut so far, write down this blog today, and share with you, and hope you twos, grateful.
When the Chinese did not learn, literary talent is not good, I went straight to the subject. (mainly write a subordinate sex and pseudo-class bar)
1, Element selector.
This is the simplest and most common way to add a style to an element selector.
Cases:
HTML {color:black;}//Set HTML element color black
div {color:gray;}//Set div element color Gray
h1 {Color:silver;}//Set H1 element color gray

That is, if you want an element to use a style, write the element {style} directly.

2. Selector grouping
Grouping is the writing of a few elements together to set the same style
Cases:
Div,p,strong{color: #FF0}//Set Div,p,strong their color value is FF0
. Part_one Div a,.part_two a,.part_three p{color: #FFF}//settings. Part_one div A and. Part_two A and. Part_three p text color values are FFF

3. Class Selector
That is, the attribute class in the element can be used when setting the style. Classname{style} This way to set the style
Cases:
<div class= "Mydiv" >this is content.</div>
. Mydiv{color: #F00;}
This sets the text color value of the element with class Mydiv to F00

4. ID Selector
That is, with the attribute ID in the element, you can set the style by using the #idname {style} when setting the style
Cases:
<div id= "Mydiv1" >this is content.</div>
#mydiv1 {color: #F00;}
This sets the text color value of the element with ID mydiv to F00
(In fact, there is no big difference with the class selector, just the difference between the weights, the same element ID selector style will override the class selector style, here does not do a detailed explanation,)

5. Descendant Selector
This is also a very common selector, just maybe the name sounds a little unfamiliar.
For example, everyone will understand.
Cases:
div ul{color: #FF0}
This is a simple descendant selector, who's underneath, that's it.

6. Child element Selector
This selector, at the beginning of the time, inexplicably I was ignored, know later, suddenly saw a case, just remembered again--,
It's better to speak with an example.
Cases:
div > h1{color:red;}
<div><div><div><div><ul><li>

In this example, only the H1 in the first and second rows of Div will be selected, but not the H1 in the third row,
Because this child element selector selects only the child element directly under it and does not select its grandchild level, or the element below the grandchild level,
And the H1 in the third line belongs to the immediate child element of Li, not the subordinate element of Div, so it doesn't work.

7. Adjacent Brother Selector
Select the element immediately after another element, and both have the same parent element
H1 + P {color:red;}
<p>text</p>
<p>text</p>
This selects the first p below the H1, but not the second p, because the second p is not immediately behind the H1

Li + li {font-weight:bold;}
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
This style, can only apply to the UL and ol inside the second to third Li Element, because the first Li it is not immediately above the LI, so there will be no effect

8. Pseudo-Class
Sounds very tall on, but if say a:link,a:visited,a:hover,a:active these are all pseudo-class one kind of words, is not compared to the people, actually this a called Pseudo anchor class (this
The words are bigger on the big. ）
: Focus
This utility can be used to set the background in input text
Input:focus{background-color:yellow;}
<input type= "text" name= "FName"/>
<input type= "text" name= "lname"/>
<input type= "Submit" value= "Submit"/>
In this case, the button point down will also be a yellow background, which is a bit uncomfortable, you can easily expand
Such as:
Input[type= "text"]:focus{background-color:yellow;}
So the submit button won't turn yellow when it's down.

: First-child
DOCTYPE must be declared so that the first-child can take effect in IE.
p:first-child {font-weight:bold;}
li:first-child {font-weight:bold;}

<p>test words1</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ul>
<p>test words ul p</p>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>test words2</p>
<p>test words3<p>test words4</p></p>
First-child pseudo-class, just beginning to understand a little helpless, always thought is who the following first element, engaged in half a day, only to understand that the original is the first element of this
Just like the HTML above.
CSS will be selected to be the first P namely: <p>test Words1</p>, and the second UL in the P <p>test words ul P</p>, the remaining p will not be selected
will also be selected to the first Li in each UL, because they have different parent
Note: if already specified! DOCTYPE, then Internet Explorer 8 (and later) supports: Focus Pseudo-class.

: lang
To tell the truth, this, I really do not understand when to use it better--, I hope which see the big can also answer for everyone, tks~!
: The Lang class defines the type of quotation marks for the Q element with the lang attribute with a value of "no"
Q:lang (NO) {quotes: "~" "~"}
<p>text <q lang= "No" >what? </q></p>

9, Pseudo-elements (this piece I used to the relatively few, check the usage, to everyone to write an example of it)
: First-letter adds a special style to the first letter of the text (only for block-level elements)
P:first-letter{color: #ff0000; font-size:xx-large;}
This sets the first letter color in P F00 font size to Xx-large

Pseudo-elements can be used in conjunction with CSS classes:
P.article:first-letter{color: #FF0000;}
<p class= "article" >this is a paragraph in an article. </p>
The above example turns the first letter of all paragraphs of class article red.

The following properties can be applied to the "first-letter" pseudo-element:
Font
Color
Background
Margin
Padding
Border
Text-decoration
Vertical-align (only when float is none)
Text-transform
Line-height
Float
Clear

: First-line adds a special style to the first line of text
I don't really feel like it, it's rare. There are only a few different styles for the first line.
P:first-line{color: #0000ff;}

: Before adding content before an element
I often use it on the clear floating above, the effect is very good
Div:after{clear:both;content: "."; display:block;height:0;visibility:hidden;font-size:0;} Here are the online examples:
H1:before{content:url (Images/logo.gif)}
Add a picture before H1

: After after element adds content
H1:after {Content:url (images/logo.gif)}
Add a picture after H1

10. Attribute Selector
For [Attribute=value] in IE8 and earlier browsers, you must declare <! Doctype>.
The use of the attribute selector is listed below
[attribute] is used to select the element with the specified attribute.
Cases:
[Title] {color:f00;}
<H1 title= "Hello css" >hello h1~!This allows you to set the text color of the element with the title property to F00, that is, the H1 color will be set to F00, but H2 will not be controlled
*[TITLE]{COLOR:F00;} Sets the element text color to F00 with the title property
A[TITLE]{COLOR:F00;} Sets the color of a element with the title property to F00
. mydiv ul Li A[title]{color:f00;} Set the class name to Mydiv below the UL below the li below with the title attribute of the A element color as F00
#mydiv ul Li A[title]{color:f00;} Set the ID named Mydiv below the ul below the li below with the title attribute of the A element color to F00

[Attribute=value] is used to select an element with the specified attributes and values.
This function is very useful in some specific situations, such as highlighting, do not use JQ or background procedures to judge, only with CSS can be implemented
Cases:
a[target= "_blank"]{color:yellow;} This sets the color of all a elements with the target property value _blank to yellow
H1[title= "MyTitle"]{color:yellow;} This sets the color of all H1 elements with the Title property value of MyTitle to yellow
After looking at the above two examples, do you think of a way to highlight the implementation in some specific situations?

[Attribute~=value] is used to select the element in the attribute value that contains the specified vocabulary.
This usage, the first time I saw it in WordPress, here is a simple example to see
img[title~= "First"]{border:3px solid yellow}//This sets the picture below the title property contains the word first in a yellow border

[Attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word.

[Class|=my] {Background:yellow;}
<H1 class= "My-header" >this is header<p class= "My-text" >this is text</p>
<p class= "My-content" >this is content</p>
<p class= "My" >this is content</p>
<p class= "My content" >this is content</p>
<p class= "Mycontent" >this is content</p>
<p class= "My_content" >this is content</p>
Only the first four will apply the style, the last three are not. But I do not understand why the fifth is also not possible, I hope that can be for everyone to answer the Big Show

[Attribute^=value] matches the property value to specify each element at the beginning of the value.
This usage is also common in WordPress, the control is very strong
Div[class^= "My"]{background: #FF0;}
<div class= "My" >this is first</div>//this will be effective
<div class= "My_first" >this is first</div>//this will have an effect
<div class= "My-first" >this is first</div>//this will have an effect
<div class= "Second" >this is second</div>
<div class= "Third_my" >this is third</div>

[Attribute$=value] matches the property value to specify each element at the end of the value.
This function is almost the same as above, the last is the beginning, this is the end
Div[class$= "My"]{background: #ffff00;}
<div class= "My_first" >this is first</div>
<div class= "Second" >this is second</div>
<div class= "Third_my" >this is third</div>//this will have an effect
<div class= "Third-my" >this is third</div>//this will have an effect
<div class= "My" >this is third</div>//this will be effective

[Attribute*=value] matches each element of the property value that contains the specified value.
Above two, one beginning, one ending, this is the inclusion of
Div[class*= "My"]{background: #ffff00;}
Div[class$= "My"]{background: #ffff00;}
<div class= "My_first" >this is first</div>//this will have an effect
<div class= "Second" >this is second</div>
<div class= "Secmyond" >this is second</div>//this will have an effect
<div class= "Sec-my-ond" >this is second</div>//this will have an effect
<div class= "Third_my" >this is third</div>//this will have an effect
<div class= "Third-my" >this is third</div>//this will have an effect
<div class= "My" >this is third</div>//this will be effective

These things, do not know how many people in the blog Park will be able to see, I will be a record of their own things.
This blog is not in-depth, and my own views are not many, there is a lot to learn, but in my work to learn to see, use some of the summary, if there are errors in the place, but also hope that we can
I am very grateful for the advice I have learned from each other.

Finally, found to write this thing is very tired, really do not know those hundreds of thousands of blog of the big, how to write, worship them, haha!