Introduction: When we code the code, you will possibly need to add or delete a style to the first or last element, as well as some of the more special by choosing to add or delete a style of several elements, the following records css selector common selector: adjacent sibling selector (+), the child selector (>), sibling selectors (~), first-child,: last-child,: nth-child () ,: nth-last-child (usage) of.
Adjacent sibling selector (+)
Immediately adjacent sibling may select another element in the element, and both have the same father element. Note: The combination of characters and the same child, the brothers combined with the adjacent symbol next to be whitespace.
Device.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
h1+p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h1>Hello word!</h1>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
The effect is as follows:
Brothers only affects the following p style tag does not affect the above brothers style.
Note that the meaning of '+' heel 'and' not the same meaning, the selector brother style is applied to the sibling elements, the style elements has nothing to do with the reference , the above embodiment only affect the pattern p elements, without affecting h1 tag style.
Of course, this cycle will find that when two siblings are the same, the cycle will once again find:
Example:
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
It can be seen first li font color is not red, the second and third elements in red font. This is because the third li li's brother is the second element, it will also apply styles.
Brothers selector (~)
Role is to find the one specified element of all sibling back .
Sample code:
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
Show results:
Descendant selectors (selectors included)
You can select the elements of an element descendants (children and grandchildren element)
Child selector (>)
As the son of an element can only select elements of the element, not including Sun elements, great-grandchildren and other elements, and so on.
Descendant selector, the selector and the adjacent sub-sibling selector exemplary combination:
Look at the following selector:
html> body table + ul {margin -top: 20px;}
This is interpreted as a selection: select the immediately adjacent first ul sibling elements appear in the table element, which is contained in a table element in the body element, the body element itself is a child of the html element.
: First-child selector
li:first-child
{
background:yellow;
}<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
Renderings
It is worth noting that, if the first element of its parent element (p) than the specified type element (li), the first element will not have the style
li:first-child
{
background:yellow;
}<ol>
<p>测试</p>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>Renderings
: Last-child selector
: Last-child element belonging to each selector match the last child element of the parent element.
Tip: p: last-child equal to p: nth-last-child (1).
eg: Specifies the background color of p elements belonging to the last child of the parent element of the element:
p:last-child
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>effect:
Description: p tag is the parent element body, body label is the last element of the fifth paragraph p
:nth-child()
: nth-child () selector, the selector selecting the parent element of N sub-elements, regardless of the type .
p:nth-child(2)
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>: Nth-child () the detailed usage
nth-child (3) indicates the third selection list elements.
nth-child (2n) denotes an even tag list, i.e., selects the second, fourth, sixth ...... tag
nth-child (2n-1) represents the selection list odd label, i.e., selects the first, third, fifth, seventh ...... tag
nth-child (n + 3) represents a label selected from the list to the last three (> = 3)
nth-child (-n + 3) represents selected tag list from 0 to 3, i.e., the label is less than 3 (<= 3)
nth-last-child (3) represents the inverse of the selection list Tab 3
:nth-of-type(n)
: nth-of-type (n ) to select parent element belonging to match the particular type of each element of the N th element.
n may be a number, key word or formulas.
p:nth-of-type(2)
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<div>测试</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
Renderings:
: Nth-last-child () selector
: Nth-last-child (n) belonging to each element of the selector to match the N th element of its elements, regardless of the type of element, a child element starts from the last count.
n may be a number, key word or formulas.
Note: See: nth-last-of-type () selector, the selector selecting the specified type N-th child of the parent element, a child element starts from the last count.
CSS3: not selector
: Not (selector) selecting each element of the non-designated matching element / selector.
Spread
A method for realizing a menu bar to the right of a plurality of frames, the selector described above in conjunction with, implementation are as follows:
First, the conventional method:
.nav li{
border-right:1px solid #fff;
}
.nav li:last-child{
border-right-width:0px;
}II: in conjunction with the adjacent sibling selector (+)
.nav li + li{
border-left:1px solid #fff;
}Third, the binding sibling selector (~)
.nav li:first-child ~ li{
border-left:1px solid #fff;
}Fourth, in combination: not () selector
.nav li:not(:last-child){
border-right:1px solid #fff;
}