Selector
Derived selector
Descendant selectors ()
Such as: h1 em {}, like his name, is a descendant elements can be, but not like this <h1> <h2> <em> hello> </ em> </ h2> </ h1>
Child element selector (>)
Such as: h1> strong {}, it is my understanding that only a child node h1 element descendants is not acceptable <h1> <em> <strong> hello </ strong> </ em> </ h1>.
Adjacent sibling selector (+)
A problem such as this: h1 + h2 is not acceptable, li + li {font-weight: bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li>
<ol>
<li>List item 4</li>
</ol>
<li>List item 3</li>
</ul>
Only bold but most of the list item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
List item 2 List item 3 will be bold and
ID (#) selector
note
1.div #test {background-color: blue;} in this class to the div
<div><div id="test">蓝色</div> </div>
2. # test div {background-color: red;} To test div id of this
<div id="test"><div>红色</div></div>
3. # test {background-color: blue;} can be used directly
<Div id = "test"> Blue </ div>
Note: 1 in a html id selector uses only once in the document, but I used once, seems OK, probably yes in the css, css + html in it may be wrong
2. can not be used in conjunction with
Class (.) Selector
1. The plurality of classes may choose .one {} .two {}
May be used in <p class = "one two"> 1 </ p>
2 may be defined in front p.one {}
Attribute selector ( based on the attribute and attribute values of an element selected element)
E.g
a[href][title]
{
color:red;
}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
I have the bold attribute
如：a[href*="w3school.com.cn"]
{
color: red;
}
This know href * = "w3school.com.cn" Based on the graph represents the href attribute comprises w3school.com.cn can use this style
<a href="http://www.w3school.com.cn/">W3School</a>