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>