h5學習之7(html中的高階選擇器的種類和用法，a標籤和img標籤)
一.html中的高階選擇器的種類和用法
1.id選擇器
語法：#id名稱{樣式1；樣式2；}
書寫的位置：head標籤中的style
<div id="qq">id選擇器 </div>
#qq{/*id選擇器*/
width:100px;height:30px;
color: burlywood;background: chartreuse;
}
2.類選擇器（class選擇器）
語法：類名{樣式1；樣式2；}
寫的位置：head標籤中的style
<div class="ww">class選擇器</div>
.ww{/*class選擇器*/
width:200px;height:30px;
color: yellow;background: red;
text-align:center;
}
3.標籤選擇器
語法：標籤名{樣式1；樣式2；}
書寫的位置：head標籤中的style
<p>233</p>
p{/*標籤選擇器*/
width:100px;height:100px;
background: yellow;
}
優先順序
內嵌樣式 > id選擇器 > 類選擇器 > 標籤選擇器
4.群組選擇器
意義：就是同時對多個選擇器進行相同的操作
注意：對於群組選擇器，兩個選擇器之間必須用","(英文逗號）隔開，不然群組選擇器無法生效
寫法：selector1,selector2,...{
CSS樣式1；
CSS樣式2；
.....；
}
selector1,selector2,...指的是標籤選擇器或者類選擇器 或者ID選擇器
書寫位置：head標籤中的style
<div class="class1">class選擇器</div>
<div id="div1">id選擇器</div>
<p id="id3">id3</p>
<p>p標籤</p>
<span class="class2">class2</span
.class1,#div1,p,span{/*群組選擇器*/
width:200px;height:30px;
color: yellow;background: red;
text-align:center;
}
5.萬用字元選擇器
語法：*表示所有意思 適用所有的html標籤
*{CSS樣式1；
CSS樣式2；
.....；
}
二.相關層次的選擇器
1.後代選擇器，又稱包含選擇器
選擇的是作為某個元素後代的元素
寫法：選擇器之間以空隔鍵隔開
語法：父...父選擇器 父父選擇器 父級選擇器 子選擇器{
CSS樣式1；
CSS樣式2；
.....；
}
作用：一級一級去尋找直到找到子選擇器，然後對子級進行樣式控制。一般標籤的巢狀使用的比較多
實質：就是從最外層一層一層去找，直到找到你想要的那個標籤，
<div>
<div id="id2">
<divclass="class2">
<div>13343444</div>
<p>121322345</p>
</div>
</div>
</div>
div#id2.class2div{
width:200px;
height:300px;background: yellow;
}
2.子選擇器
語法：父...父選擇器>父父選擇器>父級選擇器>子選擇器{
CSS樣式1；
CSS樣式2；
.....；
}
作用:從最外面層一層一層去找，直到找到想要的子元素為止，然後對該元素進行控制。
例如：
<div>
<divid="id4">
<p>456</p>
</div>
</div>
div>#id4>p{
width:200px;
height:300px;background: yellow;
}
注意：子選擇器與後代選擇器的區別
子選擇器一定找到的是直接子級，這裡不包括子元素中的標籤元素，只能控制div2的子級中div3和p2
後代選擇器找的是子級，並且子級裡面的所有元素都屬於該元素的後代。可以控制該子級的所有後代，而後代選擇器可以控制的是div2的所有後代div3，p1，p2
<div1>
<div2>
<div3>
<p1></p1>
</div3>
<p2></p2>
</div2>
</div1>
3.相鄰兄弟選擇器
可選擇緊接在另一元素後的元素，且兩者有相同的父級元素
兄弟選擇器的寫法：相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。
語法：兄弟1選擇器+兄弟2選擇器+兄弟...選擇器{
CSS樣式1；
CSS樣式2；
.....}
注意：兄弟選擇器一定選擇的時與兄弟離得最近的下一個元素。它控制的元素也只有一個。
例如：
<p>1</p>
<div></div>
<p>2</p>
div+p{ }
這個控制的時P2，二不是P1，雖然p1，P1與div離得都很近，但是p2是div的下一個，所以控制的是p2
三.偽類選擇器
1.什麼叫偽類？
偽類就是根據一定的特徵對元素進行分類，而不是根據類容，名稱，屬性。
1）語法：link{
具體的樣式；
}
適用：只有a標籤有這個偽類，定義了超連結未被點級的元素
用法：
diva:link{
width:600px; /*改變背景的大小*/
height:500px;
background: black;/*改變背景的顏色*/
}
2）選擇器:visited{
具體樣式；
}
適用:只有a標籤有這個偽類，定義了超連結且被點級的元素
用法：
diva:visited{
width:600px; /*改變背景的大小*/
height:500px;
background: black;/*改變背景的顏色*/
}
3）選擇器：hover{
具體樣式；
}
適用：只有所有標籤有這個偽類，定義了滑鼠懸浮在該元素時要呈現的狀態。
用法：
diva:hover{
width:600px; /*改變背景的大小*/
height:500px;
background: black;/*改變背景的顏色*/
}
4）選擇器：active{
具體樣式
}
適用：只有a標籤有這個偽類，定義了滑鼠點選該元素時要呈現的狀態。
用法：
diva:active{
width:600px; /*改變背景的大小*/
height:500px;
background: black;/*改變背景的顏色*/
}
<div>3
<a href="">4</a>
</div>
四.a標籤的用法和它的偽類用法
1.a標籤
<a>標籤定義超連結，用於從一張頁面連結到另一張頁面
<a>標籤最重要的屬性是href屬性，它指示連結的目標，也可以說是要連結的頁面的地址
<a href="http://www.baidu.com"target="_blank">jjj</a>
語法：<a href="連結跳轉地址"target="瀏覽器開啟方式"name="錨點：用於頁面不同位置的跳轉，僅限當前檔案"></a>
target屬性值：
1）_blank 在空白頁開啟
<a href="http://www.baidu.com"target="_blank">百度</a>
2）_self（預設值） 在相同視窗開啟跳轉的地址
<a href="http://www.baidu.com"target="_self">dd</a>
3）_parent 在父框集中開啟該連結
<a href="http://www.baidu.com"target="_parent">bb</a>
4）_top 在整個視窗中開啟連結地址
<a href="http://www.baidu.com"target="_top">
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
bb</a>
2，錨點（頁面位置跳轉地址）
1）建立一個跳轉點（錨點） 使用a標籤的name屬性或者id來指定錨點
<a name="jump"></a> <a id="jump"></a>
2）用a標籤的herf的屬性來指定跳轉到的錨點
<a href="#jump"></a>
例如：
<p>fdsdf</p>
<a id="jump"></a> <!--最終跳轉的地方-->
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>
<a href="#jump">回到頂部</a>
3.a標籤的偽類
1） 連結點選按下未跳轉前呈現的狀態
a:link{color: red;}
2）被訪問過後,呈現的顏色
a:visited{color: yellow;}
3）滑鼠懸浮時呈現的狀態
a:hover{color: chocolate;}
4）滑鼠按下時呈現的狀態
a:active{color: magenta;}
遵循的順序:link-visited-hover-active
偽類選擇器我們不需要在設定元素的class屬性,因為系統預設已經設定了class，而類選擇器在使用之前是需要給元素新增一個class屬性的
五.img標籤
寫法:<imgsrc="圖片的路徑" alt="當圖片不能正常顯示時才會提示這句話" title="圖片標題"/>
<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"
alt="當圖片不能正常顯示時，我才顯示" title="圖片"/>
注意：
1.路徑可以是本地圖片地址，也可以是網路圖片地址
2.alt屬性一定要寫
3.圖片如果不設定寬高，那麼顯示的圖片寬高會和原始圖片大小保持一致
4.如果只設置寬高中的一個，那麼另外一個就會等比例進行縮放
5.如果同時設定寬高，那麼圖片就會拉伸或壓縮。