課程目標(biāo)
- 掌握常見(jiàn) CSS 選擇器的用法
- 對(duì)選擇器優(yōu)先級(jí)有一定認(rèn)識(shí)
學(xué)習(xí)建議
- 從學(xué) CSS 開(kāi)始饥悴，課程視頻里的代碼需要邊聽(tīng)、邊暫停贷揽、邊跟著寫(xiě)
預(yù)習(xí)視頻
課程任務(wù)
問(wèn)答
一、CSS選擇器常見(jiàn)的有幾種?
- 基礎(chǔ)選擇器
| 選擇器 | 名稱 | 含義 |
|---|---|---|
| * | 通用元素選擇器 | 匹配頁(yè)面任何元素（這也就決定了我們很少使用） |
| #id | id選擇器 | 匹配特定的id元素 |
| .class | 類選擇器 | 匹配class包含特定類的元素 |
| element | 標(biāo)簽選擇器 | —— |
以下為實(shí)例：
*{
}/*通用元素選擇器*/
#id-selected{
}/*id選擇器*/
.class{
}/*類選擇器*/
p{
}/*標(biāo)簽選擇器*/
- 組合選擇器
| 選擇器 | 名稱 | 含義 |
|---|---|---|
| E,F | 多元素選擇器 | 同時(shí)匹配E元素和F元素 |
| E F | 后代選擇器 | 選擇E元素的所有后代F元素（不是子元素，子元素向下遞歸） |
| E>F | 子元素選擇器 | 選擇E元素的所有直接子元素F |
| E+F | 直接相鄰選擇器 | 匹配E元素之后的相鄰?fù)?jí)元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器） | 匹配E元素之后的所有同級(jí)元素F（不論相鄰與否） |
小知識(shí)點(diǎn)：“h1.class名稱”表示這個(gè)選擇器既是h1又有class的名字，這樣可以區(qū)分兩個(gè)class名字一樣但是標(biāo)簽不一樣的情況础钠。
以下為實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組合選擇器</title>
</head>
<style>
.parent,
.mydiv {
font-size: 30px;
}
.parent p {
background: yellow;
}
.parent>div {
border: 1px solid black;
}
.mydiv div+p {
text-align: center;
}
.mydiv div~p {
background: #ccc;
}
</style>
<body>
<div class="parent">
<p>child1</p>
<div class="child2">
<div>child2-1</div>
<div>child2-2</div>
</div>
<div>child3</div>
<div>child4</div>
</div>
<div class="mydiv">
<p>div1</p>
<div>div2</div>
<p>div3</p>
<p>div4</p>
</div>
</body>
</html>
以上代碼的輸出結(jié)果為：
組合選擇器輸出結(jié)果
- 屬性選擇器
| 選擇器 | 名稱 | 含義 |
|---|---|---|
| E[attr] | 匹配所有具有屬性為attr的元素 | div[id]能選擇所有具有id屬性的div |
| E=[attr=value] | 匹配所有屬性為value的元素 | div[type=text]匹配id=text的div |
| E[attr~=value] | 匹配所有屬性attr具有多個(gè)空格分隔正罢、其中一個(gè)值等于value的元素 | —— |
| E[attr ^= value] | 匹配屬性attr的值以value開(kāi)頭的元素 | —— |
| E[attr $= value] | 匹配屬性attr的值以value結(jié)尾的元素 | —— |
| E[attr *= value] | 匹配屬性attr的值包含value的元素 | —— |
其中履怯，E=[attr=value]較為常用
以下為實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
</head>
<style>
input[type="text"] {
background: yellow;
}
input[placeholder="密碼"] {
background: green;
}
</style>
<body>
<form name="myform" action="index.html" method="post">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
</form>
</body>
</html>
以下為輸出結(jié)果
屬性選擇器輸出結(jié)果
- 偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個(gè)子元素 |
| E:last-child | 匹配元素E的最后一個(gè)子元素 |
| E:nth-child(n) | 匹配其父元素的第n個(gè)子元素运提，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:only-child | 匹配父元素下僅有的一個(gè)子元素 |
| E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素栈妆，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:nth-of-type(n) | 與E:nth-child類似寥假，但是僅匹配同種標(biāo)簽的 |
| E:nth-last-of-type | 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素兔沃，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有以被點(diǎn)擊的鏈接 |
| E:active | 匹配被鼠標(biāo)點(diǎn)擊并未釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停至上的E元素 |
| E:focus | 匹配獲得焦點(diǎn)的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E:selection | 匹配用戶當(dāng)前選中的元素 |
| E:root | 匹配文檔的根元素怕吴，對(duì)于HTML文檔伟件，根元素就是HTML元素 |
| E:empty | 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看做是子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |
以下為實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap a:first-child:link {
background: yellow;
}
.wrap a:nth-child(2):visited {
text-decoration: line-through;
}
.wrap a:nth-child(3):active {
font-size: 20px;
}
.wrap a:last-child:hover {
color: red;
}
.wrap :lang(c) {
border: 1px solid black;
}
.myform :enabled {
background: blue;
}
.myform :focus {
background: yellow;
}
.myform :disabled {
display: block;
}
.myform :checked {
display: block;
}
.myform :selection {
display: block;
}
.wrap :empty{
text-align: center;
}
</style>
<body>
<div id="header">
<div class="wrap">
<a href="#">導(dǎo)航1</a>
<a href="#">導(dǎo)航2</a>
<a href="#">導(dǎo)航3</a>
<a href="#">導(dǎo)航4</a>
</div>
</div>
<div id="cotent">
<div class="wrap">
<div lang="c">側(cè)邊欄
</div>
中心區(qū)塊
<form class="myform" action="index.html" method="post">
<p>
用戶名：
<input type="text" name="username" placeholder="用戶名" />
</p>
<p>
<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="male/female" disabled/>劉梓晨
</p>
</form>
</div>
<div id="footer">
<div class="wrap">
我是底部
</div>
</div>
</body>
</html>
以下為輸出結(jié)果：
偽類選擇器輸出結(jié)果
- 偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素的第一行 |
| E::first-letter | 匹配E元素的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
其中籍救，n的取值為
- 1习绢，2，3蝙昙，4闪萄，5
- 2n+1, 2n, 4n-1
- odd, even
以下為實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽元素選擇器</title>
<style>
p:first-child::first-line {
color: red;
}
p:nth-child(2)::first-letter {
font-size: 50px;
}
p:nth-child(3)::before {
content: "!";
}
p:nth-child(3)::after {
content: "???????";
}
</style>
</head>
<body>
<div id="content">
<div class="wrap">
<p>這是第一行</br>
這是第二行
</p>
<p>這是第三行</p>
<p>這是第四行</p>
</div>
</div>
</body>
</html>
以下為輸出結(jié)果：
偽元素選擇器輸出結(jié)果
** 二、選擇器的優(yōu)先級(jí)是怎樣的? **
-
CSS規(guī)則由單個(gè)選擇器組成：
- 在屬性后面加!important會(huì)覆蓋頁(yè)面上任何位置定義的屬性樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
CSS選擇器由多個(gè)選擇器組成：
“一萬(wàn)個(gè)calss的權(quán)重加起來(lái)也沒(méi)有一個(gè)if的權(quán)重高”
權(quán)值高的選擇器作用的越具體奇颠，權(quán)重越高
** 三败去、class 和 id 的使用場(chǎng)景? **
- class名稱可以重復(fù)，可設(shè)置樣式后賦予不同的元素
- id名稱不能重復(fù)，對(duì)頁(yè)面排版進(jìn)行結(jié)構(gòu)化布局用
- id是唯一的伴郁，更多的是留給JS用
** 四、使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g握巢？ **
- 代碼易于寫(xiě)作與維護(hù)飞几，易于讓人讀懂
- 避免命名不規(guī)范而導(dǎo)致的出錯(cuò)
** 五灿里、以下選擇器分別是什么意思? **
#header{
}/*匹配id=header的元素*/
.header{
}/*匹配class=header的元素*/
.header .logo{
}/*后代選擇器，匹配calss=header元素的后代中的class=logo的元素*/
.header.mobile{
}/*匹配calss="header mobile"的元素*/
.header p, .header h3{
}/*多元素選擇器蒜哀，匹配class=header元素的后代中的p元素及h3元素*/
#header .nav>li{
}/*后代選擇器易核，匹配id=header元素后代中的class=nav的元素后代中的直接子元素li*/
#header a:hover{
}/*后代元素選擇器，匹配id=header元素中的所有a鏈接鼠標(biāo)懸停在其上的效果*/
** 六、列出你知道的偽類選擇器 **
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個(gè)子元素 |
| E:last-child | 匹配元素E的最后一個(gè)子元素 |
| E:nth-child(n) | 匹配其父元素的第n個(gè)子元素厌蔽，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:only-child | 匹配父元素下僅有的一個(gè)子元素 |
| E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素江锨，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:nth-of-type(n) | 與E:nth-child類似壳鹤，但是僅匹配同種標(biāo)簽的 |
| E:nth-last-of-type | 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有以被點(diǎn)擊的鏈接 |
| E:active | 匹配被鼠標(biāo)點(diǎn)擊并未釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停至上的E元素 |
| E:focus | 匹配獲得焦點(diǎn)的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E:selection | 匹配用戶當(dāng)前選中的元素 |
| E:root | 匹配文檔的根元素，對(duì)于HTML文檔辕棚，根元素就是HTML元素 |
| E:empty | 匹配一個(gè)不包含任何子元素的元素赚哗，文本節(jié)點(diǎn)也被看做是子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |
** 七、:first-child和:first-of-type的作用和區(qū)別 **
詳見(jiàn)：饑人谷知識(shí)點(diǎn)二：關(guān)于偽類選擇器:first-child和:first-of-type
** 八相叁、運(yùn)行如下代碼，解析下輸出樣式的原因个盆。 **
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
分析如下：
.item1:first-child{
color: red;
}
以上代碼匹配作為子元素的首個(gè)item1终惑，所以aa的顏色為紅色
.item1:first-of-type{
background: blue;
}
以上代碼匹配作為子元素的所有標(biāo)簽的第一個(gè)item1臼寄，其中aa為第一個(gè)p煤惩，bb為第一個(gè)h3票彪，所以aa和bb的背景色為藍(lán)色
詳見(jiàn)：饑人谷知識(shí)點(diǎn)二：關(guān)于偽類選擇器:first-child和:first-of-type
text-align: center的作用是什么雹顺，作用在什么元素上丹墨？能讓什么元素水平居中
text-align: center是讓塊級(jí)元素內(nèi)的元素（文本或圖片）居中，只能作用在塊級(jí)元素嬉愧。
附塊級(jí)元素與行內(nèi)元素的分類：
- 塊級(jí)元素：div贩挣、p、h1…h(huán)6英染、table揽惹、tr、ul四康、li、dl狭握、dt闪金、form
- 行內(nèi)元素：a、span论颅、img哎垦、input、button恃疯、em漏设、textarea
** 如果遇到一個(gè)屬性想知道兼容性，在哪查看? **
通過(guò)網(wǎng)址 http://caniuse.com/ 去查詢其兼容性
比如想要查代碼inline-block的兼容性
inline-block的兼容性
本教程版權(quán)歸本人和饑人谷所有今妄，轉(zhuǎn)載須說(shuō)明來(lái)源
