一、CSS3的新特性
1.1啥供、CSS的現(xiàn)狀
- 新增的CSS3特性有兼容性問題悯恍，ie9+才支持。
- 移動(dòng)端支持優(yōu)于PC端伙狐。
- 不斷改進(jìn)中涮毫。
- 應(yīng)用相對廣泛
- 現(xiàn)階段主要學(xué)習(xí)：
和
以及
CSS3新增選擇器
CSS3給我們新增了選擇器，可以更加便捷贷屎，更加自由的選擇目標(biāo)元素罢防。
- 屬性選擇器
- 結(jié)構(gòu)偽類選擇器
- 偽元素選擇器
1.2 屬性選擇器
屬性選擇器可以根據(jù)元素特定屬性來選擇元素。這樣就可以不用借助于類或者id選擇器唉侄。
| 選擇符 | 簡介 |
|---|---|
| E[att] | 選擇具有att屬性的E元素 |
| E[att="val"] | 選擇具有att屬性且屬性值等于val的E元素 |
| E[att^="val"] | 匹配具有att屬性且值以val開頭的E元素 |
| E[att$="val"] | 匹配具有att屬性且值以val結(jié)尾的E元素 |
| E[att*="val"] | 匹配具有att屬性且值中含有val的E元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增屬性選擇器</title>
<style>
/* 必須是input 但是同時(shí)具有 value這個(gè)屬性 選擇這個(gè)元素 [] */
/* input[value] {
color:pink;
} */
/* 只選擇 type =text 文本框的input 選取出來 */
input[type=text] {
color: pink;
}
/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 類選擇器和屬性選擇器 偽類選擇器 權(quán)重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用屬性選擇器就可以不用借助于類或者id選擇器 -->
<!-- <input type="text" value="請輸入用戶名">
<input type="text"> -->
<!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 重點(diǎn)務(wù)必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 -->
<div class="icon1">小圖標(biāo)1</div>
<div class="icon2">小圖標(biāo)2</div>
<div class="icon3">小圖標(biāo)3</div>
<div class="icon4">小圖標(biāo)4</div>
<div>我是打醬油的</div>
<!-- 4. 屬性選擇器可以選擇屬性值結(jié)尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是誰</section>
</body>
</html>
image.png
1.3、結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)來選擇元素同眯，常用于根據(jù)父級選擇器里面的子元素
| 選擇符 | 簡介 |
|---|---|
| E:first-child | 匹配父元素中的第一個(gè)子元素E |
| E:last-child | 匹配父元素中的最后一個(gè)E元素 |
| E:nth-child(n) | 匹配父元素中的第n個(gè)子元素E |
| E:first-of-type | 指定類型E的第一個(gè) |
| E:last-of-type | 指定類型E的最后一個(gè) |
| E:nth-of-type(n) | 指定類型E的第n個(gè) |
nth-child(n)選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素
- n 如果是數(shù)字，就是選擇第n個(gè)子元素官份，里面數(shù)字從1開始...
- n 可以是關(guān)鍵字：even偶數(shù)只厘，odd奇數(shù)
- n 可以是公式：常見的公式如下(如果n是公式烙丛，則從0開始計(jì)算，但是第0個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略)
| 公式 | 取值 |
|---|---|
| 2n | 偶數(shù) |
| 2n+1 | 奇數(shù) |
| 5n | 5 10 15 ... |
| n+5 | 從第5個(gè)開始(包含第五個(gè))到最后 |
| -n+5 | 前5個(gè)(包含第5個(gè))... |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增結(jié)構(gòu)偽類選擇器</title>
<style>
/* 1. 選擇ul里面的第一個(gè)孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 選擇ul里面的最后一個(gè)孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 選擇ul里面的第2個(gè)孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增結(jié)構(gòu)偽類選擇器-nth-child</title>
<style>
/* 1.把所有的偶數(shù) even的孩子選出來 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇數(shù) odd的孩子選出來 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 從0開始 每次加1 往后面計(jì)算 這里面必須是n 不能是其他的字母 選擇了所有的孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 4.nth-child(2n)母選擇了所有的偶數(shù)孩子 等價(jià)于 even*/
/* ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
} */
/* ol li:nth-child(n+3) {
background-color: pink;
} */
ol li:nth-child(-n+3) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
<ol>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ol>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增選擇器nth-type-of</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 會(huì)把所有的盒子都排列序號 */
/* 執(zhí)行的時(shí)候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 會(huì)把指定元素的盒子排列序號 */
/* 執(zhí)行的時(shí)候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第幾個(gè)孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
<!-- 區(qū)別 -->
<section>
<p>光頭強(qiáng)</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
image.png
二羔味、總結(jié)
- 結(jié)構(gòu)偽類選擇器一般用于選擇父級里面的第幾個(gè)孩子
- nth-child 對父元素里面所有孩子排序選擇（序號是固定的）先找到第n個(gè)孩子河咽，然后看看是否和E匹配。
- nth-of-type 對父元素里面指定子元素進(jìn)行排序選擇赋元。先去匹配E忘蟹，然后再根據(jù)E找第n個(gè)孩子。
- 關(guān)于nth-child(n)我們要知道n是從0開始計(jì)算的搁凸，要記住常用的公式媚值。
- 如果是無序列表，我們肯定用nth-child更多护糖。
- 類選擇器褥芒、屬性選擇器、偽類選擇器嫡良，權(quán)重為10锰扶。
