CSS布局基础(五)--CSS3新增选择器
一、兄弟选择器
**兄弟选择器与相邻选择器类似，通过同级的兄弟元素来相互控制。所谓兄弟选择器就是指定一个元素后面的同级元素的样式，使用~表示
image.png
和相邻选择器的区别在于会影响到后面同级的所有要求元素
<!--h2后所有div都采用设定的CSS样式-->
<style style="text/css">
h2{
font-size:24px;color: yellow
}
h2~div{
font-size:16px;color: red
}
</style>
</head>
<body>
<h2>HTML结构</h2>
<div>HTML树状图</div>
<p>HTML知识</p>
<div class="class1">问君能有几多愁</div>
<div>问君能有几多愁</div>
</body>
二、目标伪类选择器
用来匹配锚点指向的元素，突出显示活动的HTML锚。
举个例子：
<a href="#box-three">Tab 3</a>
<div id="box-three">tab3 content</div>
那么a标签的href属性会链接到#box-three元素，也就是box-three:target选择符所选的目标元素，它所指定的样式就是当a链接到这个元素时候，目标元素的样式。
<head>
<title></title>
<style type="text/css">
#big-bam-boom:target {
color: red;
}
</style>
</head>
<body>
<h1 id="big-bam-boom">Kaplow!</h1>
<a href="#big-bam-boom">Mission Control, we're a little parched up here.</a>
</body>
<!--根据上面的例子来看，这里的意思就是当点击a链接，链接跳转到h1的时候，h1的文字会显示为红色-->
注意：这里不是id和class，是锚点的问题
三、结构伪类
利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定元素
<div id="wrap">
<ul id="container">
<li><a href="#">送君千里</a><li>
<li><a href="#">送君千里</a><li>
<li><a href="#">送君千里</a><li>
<li><a href="#">送君千里</a><li>
<li><a href="#">送君千里</a><li>
</ul>
</div>
1）first-child
用来选择某个元素的第一个子元素
#wrap li:first-child{
background-position：2px 10px;
font-weight：bold;
}
2）last-child和first-child类似，选择元素最后一个子元素，这里不做赘述
3）nth-child()：nth-child 是查找一堆兄弟元素里的第二个元素，不管那元素是什么，只要它排行第n就行（IE6-IE8不支持该属性）
nth-child(n)：n是从0开始计算的，表示没有选择元素；直接写n表示选中所有。但括号里的值一定不能是负数
- nth-child(n*length)：n的倍数选择，n从0开始计算，length为任意数字。结果是偶数时，等同于nth-child(even)
- nth-child(n*length-1)：n是偶数，则结果是奇数选择；n是奇数，则结果是偶数选择。奇数时等同于nth-child(odd)
- nth-child(n+length)：选择大于length后面的元素
- nth-child(-n+length)：选择小于length前面的元素
- nth-child(n*length+1)：表示隔几选一
#wrap li:nth-child(2){
color:red;
}
<!--wrap的第二个子元素的每个li 的背景色-->
4）nth-last-child()：从最后一个元素开始计算，来选定特定元素
- nth-last-child(1)等同于last-child，都是选择最后一个元素
- nth-last-child()与nth-chaild()用法相同
- 偶数：nth-last-child(2n)、nth-last-chaild(even)等于nth-child(2n+1)、nth-child(2n-1)、nth-child(odd)
- 奇数：nth-last-child(2n+1)、nth-last-chaild(2n-1)、nth-last-chaild(odd)等于nth-child(even)、nth-child(2n)
5）nth-of-type()：
是在一堆兄弟元素里找到相同HTML标记类型元素中排行第n的元素。这个选择器主要用来定位元素中包含了好多不同类型的元素。如div#wrap中包含了很多p、li、img等，但现在只需要p元素，并要每隔一个或几个p元素就可以有不同样式，这时这个选择器就很有用了
div#wrap p:nth-of-type(even){
color:red;
}
<!--冒号之前是类型-->
6）nth-last-of-type()：用法和nth-of-type()类似，这里不赘述
7）first-of-type、last-of-type：
类似于first-child和last-child，但这里指定了类型
8）only-child和only-child-type
only-child：表示一个元素是它的父级元素的唯一一个子元素
<!--当含有post类属性的标签下p是唯一标签时，应用设定的CSS样式-->
<style type="text/css">
.post p:only-child{
color:red;
}
</style>
<body>
<div class="post">
<p>第一段</p>
<p>第一段</p>
</div>
<div class="post">
<p>第三段文本内容</p>
</div>
</body>
9）only-of-type：表示一个元素包含很多子元素，而其中只有一个元素是唯一的
<style type="text/css">
.post p:only-of-type{
color:red;
}
</style>
<body>
<div class="post">
<div>子块</div>
<p>第一段</p>
<div>第一段</div>
</div>
</body>
10）empty：
没有任何内容的元素，空格也不包含
<style type="text/css">
.post p:empty{
display:none;
}
</style>
<body>
<div class="post">
<p></p>
</div>
</body>
四、否定伪类选择器（主要用于表单）
not()：进行过滤操作
<!--含有submit属性的按钮不采用这个样式-->
input:not([type="submit"]){
border:1px solid red;
}
<title>包含</title>
<style type="text/css">
table{border-collapse: collapse;font-size: 75%;line-height: 1.4;border: solid 2px #ccc;width: 100%;}
th,td{padding: .3em;cursor: pointer;}
th{font-weight: normal;text-align: left;padding-left: 15px;}
td:only-of-type{font-weight: bold;color: #444;}
tbody th:not(.end){background: url(images/dots.gif)15px 56% no-repeat;padding-left: 26px;}
tbody th.end{background: url(images/dots.gif)15px 56% no-repeat;padding-left: 40px;}
tbody tr:hover{background: blue;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>伪装类表达</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td colspan="3">简单的伪装类结构</td></tr>
<tr><th>1</th><td>:first-child</td><td>选择某个元素的第一个元素</td></tr>
<tr><th>2</th><td>:last-child</td><td>选择某个元素的最后一个元素</td></tr>
<tr><th>3</th><td>:first-of-type</td><td>选择一个上级元素下的第一个同类子元素</td></tr>
<tr><th>4</th><td>:last-of-type</td><td>选择一个上级元素的最后一个同类子元素</td></tr>
<tr><th>5</th><td>:only-child</td><td>选择的元素是它的父元素的唯一一个子元素</td></tr>
<tr><th>6</th><td>:only-of-type</td><td>选择一个元素是它的上级元素的唯一一个相同类型的子元素</td></tr>
<tr><th class="end">7</th><td>:empty</td><td>选择的元素里没有任何内容</td></tr>
<tr><td colspan="3">结构伪类函数</td></tr>
<tr><th>8</th><td>:nth-child()</td><td>选择某个元素的一个或多个特定的子元素</td></tr>
<tr><th>9</th><td>:nth-last-child()</td><td>选择某个元素的一个或多个特定的子元素,从最后一个开始算</td></tr>
<tr><th>10</th><td>:nth-of-type()</td><td>选择指定的元素</td></tr>
<tr><th class="end">11</th><td>:nth-last-of-type()</td><td>选择指定的元素，从元素的最后一个开始计算</td></tr>
</tbody>
</table>
</body>
五、状态伪类选择器
主要针对表单进行选择，包含可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等
1）enabled
匹配enabled伪类表示匹配指定范围内所有可用UI元素。UI元素一般是指包含在form元素内的表单元素
2）disabled
匹配指定范围内所有不可用的UI元素
<style>
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="radio"]:disabled
{
background:#dddddd;
}
</style>
<form action="">
First name: <input type="text" value="Mickey" /><br>
<input type="radio" value="male" name="gender" /> Male<br>
Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
</form>
2）checked
<style>
input[type=checkbox]:checked
{
background:red;
}
<style/>
<form>
<input type="checkbox"/> <br>
<input type="radio" checked="checked"/>
</form>
