CSS布局基礎(chǔ)(五)--CSS3新增選擇器

一困后、兄弟選擇器
**兄弟選擇器與相鄰選擇器類似，通過同級(jí)的兄弟元素來相互控制。所謂兄弟選擇器就是指定一個(gè)元素后面的同級(jí)元素的樣式晋辆，使用~表示

image.png

和相鄰選擇器的區(qū)別在于會(huì)影響到后面同級(jí)的所有要求元素

<!--h2后所有div都采用設(shè)定的CSS樣式-->
<style style="text/css">
   h2{
          font-size:24px;color: yellow
}
    h2~div{
          font-size:16px;color: red
}
</style>
</head>
<body>
<h2>HTML結(jié)構(gòu)</h2>
<div>HTML樹狀圖</div>
<p>HTML知識(shí)</p>
<div class="class1">問君能有幾多愁</div>
<div>問君能有幾多愁</div>
</body>

二、目標(biāo)偽類選擇器
用來匹配錨點(diǎn)指向的元素宇整，突出顯示活動(dòng)的HTML錨瓶佳。
舉個(gè)例子：

<a href="#box-three">Tab 3</a>
<div id="box-three">tab3 content</div>

那么a標(biāo)簽的href屬性會(huì)鏈接到#box-three元素，也就是box-three:target選擇符所選的目標(biāo)元素鳞青，它所指定的樣式就是當(dāng)a鏈接到這個(gè)元素時(shí)候霸饲，目標(biāo)元素的樣式。

<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>
<!--根據(jù)上面的例子來看臂拓，這里的意思就是當(dāng)點(diǎn)擊a鏈接厚脉，鏈接跳轉(zhuǎn)到h1的時(shí)候，h1的文字會(huì)顯示為紅色-->

注意：這里不是id和class胶惰，是錨點(diǎn)的問題

三傻工、結(jié)構(gòu)偽類
利用文檔結(jié)構(gòu)樹實(shí)現(xiàn)元素過濾，通過文檔結(jié)構(gòu)的相互關(guān)系來匹配特定元素

<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

用來選擇某個(gè)元素的第一個(gè)子元素

#wrap li:first-child{
  background-position：2px 10px;
  font-weight：bold;
}

2）last-child和first-child類似孵滞，選擇元素最后一個(gè)子元素中捆，這里不做贅述
3）nth-child()：nth-child 是查找一堆兄弟元素里的第二個(gè)元素，不管那元素是什么坊饶，只要它排行第n就行（IE6-IE8不支持該屬性）

nth-child(n)：n是從0開始計(jì)算的轨香，表示沒有選擇元素；直接寫n表示選中所有幼东。但括號(hào)里的值一定不能是負(fù)數(shù)

nth-child(n*length)：n的倍數(shù)選擇臂容，n從0開始計(jì)算，length為任意數(shù)字根蟹。結(jié)果是偶數(shù)時(shí)脓杉，等同于nth-child(even)
nth-child(n*length-1)：n是偶數(shù)，則結(jié)果是奇數(shù)選擇简逮；n是奇數(shù)球散，則結(jié)果是偶數(shù)選擇。奇數(shù)時(shí)等同于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的第二個(gè)子元素的每個(gè)li 的背景色-->

4）nth-last-child()：從最后一個(gè)元素開始計(jì)算散庶，來選定特定元素

nth-last-child(1)等同于last-child蕉堰，都是選擇最后一個(gè)元素

nth-last-child()與nth-chaild()用法相同

偶數(shù)：nth-last-child(2n)、nth-last-chaild(even)等于nth-child(2n+1)悲龟、nth-child(2n-1)屋讶、nth-child(odd)
奇數(shù)：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標(biāo)記類型元素中排行第n的元素斩芭。這個(gè)選擇器主要用來定位元素中包含了好多不同類型的元素。如div#wrap中包含了很多p乐疆、li划乖、img等，但現(xiàn)在只需要p元素挤土，并要每隔一個(gè)或幾個(gè)p元素就可以有不同樣式琴庵，這時(shí)這個(gè)選擇器就很有用了

div#wrap p:nth-of-type(even){
  color:red;
}
<!--冒號(hào)之前是類型-->

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：表示一個(gè)元素是它的父級(jí)元素的唯一一個(gè)子元素

<!--當(dāng)含有post類屬性的標(biāo)簽下p是唯一標(biāo)簽時(shí)，應(yīng)用設(shè)定的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>第三段文本內(nèi)容</p>
</div>
</body>

9）only-of-type：表示一個(gè)元素包含很多子元素筒占，而其中只有一個(gè)元素是唯一的

<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：

沒有任何內(nèi)容的元素贪庙，空格也不包含

<style type="text/css">
 .post p:empty{
  display:none;
}
</style>
<body>
<div class="post">
    <p></p>
</div>
</body>

四、否定偽類選擇器（主要用于表單）
not()：進(jìn)行過濾操作

<!--含有submit屬性的按鈕不采用這個(gè)樣式-->
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>編號(hào)</th>
            <th>偽裝類表達(dá)</th>
            <th>說明</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="3">簡單的偽裝類結(jié)構(gòu)</td></tr>
        <tr><th>1</th><td>:first-child</td><td>選擇某個(gè)元素的第一個(gè)元素</td></tr>
        <tr><th>2</th><td>:last-child</td><td>選擇某個(gè)元素的最后一個(gè)元素</td></tr>
        <tr><th>3</th><td>:first-of-type</td><td>選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素</td></tr>
        <tr><th>4</th><td>:last-of-type</td><td>選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素</td></tr>
        <tr><th>5</th><td>:only-child</td><td>選擇的元素是它的父元素的唯一一個(gè)子元素</td></tr>
        <tr><th>6</th><td>:only-of-type</td><td>選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素</td></tr>
        <tr><th class="end">7</th><td>:empty</td><td>選擇的元素里沒有任何內(nèi)容</td></tr>
        <tr><td colspan="3">結(jié)構(gòu)偽類函數(shù)</td></tr>
        <tr><th>8</th><td>:nth-child()</td><td>選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素</td></tr>  
        <tr><th>9</th><td>:nth-last-child()</td><td>選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素,從最后一個(gè)開始算</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>選擇指定的元素翰苫，從元素的最后一個(gè)開始計(jì)算</td></tr>  
      </tbody>
</table>
</body>

五止邮、狀態(tài)偽類選擇器
主要針對表單進(jìn)行選擇，包含可用奏窑、不可用导披、選中、未選中埃唯、獲取焦點(diǎn)撩匕、失去焦點(diǎn)、鎖定墨叛、待機(jī)等
1）enabled

匹配enabled偽類表示匹配指定范圍內(nèi)所有可用UI元素止毕。UI元素一般是指包含在form元素內(nèi)的表單元素
2）disabled
匹配指定范圍內(nèi)所有不可用的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>