選擇器
選擇器：精準(zhǔn)選中想要的元素
簡單選擇器
1、ID選擇器
2、元素選擇器
3、類選擇器
4、通配符選擇器
*，選中所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>Lorem.</div>
<p>Lorem.</p>
<h1>Lorem.</h1>
</body>
</html>
5、屬性選擇器
根據(jù)屬性名和屬性值選中元素 具體更多可以查閱mdn，點(diǎn)擊這里直接跳轉(zhuǎn)查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 選中所有具有href屬性的元素 */
[href] {
color: red;
}
[] {
color: blue;
}
[]{
color: #008c8c;
}
[href$="baidu.com"]{
color: #008c8c8;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<a >百度</a>
<a >新浪</a>
<a >斗魚</a>
</body>
</html>
6、偽類選擇器
選中某些元素的某種狀態(tài)
- hover 鼠標(biāo)懸停移動(dòng)的狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:hover {
color: red;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<a >百度</a>
<a >新浪</a>
<a >斗魚</a>
</body>
</html>
這個(gè)就是鼠標(biāo)懸停到文字上的顏色樣式改變
- activate 鼠標(biāo)按下的時(shí)候發(fā)生改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:hover {
color: red;
}
:active {
color: green;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<a >百度</a>
<a >新浪</a>
<a >斗魚</a>
</body>
</html>
- link 超鏈接未訪問時(shí)的狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:hover {
color: red;
}
:active {
color: green;
}
:link {
color: #ccc;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<a >百度</a>
<a >新浪</a>
<a >斗魚</a>
</body>
</html>
- visited 訪問過的顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:hover {
color: red;
}
:active {
color: green;
}
:link {
color: #ccc;
}
:visited {
color: chocolate;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<a >百度</a>
<a >新浪</a>
<a >斗魚</a>
</body>
</html>
但是如果四個(gè)偽類都需要用到的話需要按照
1、link
2、visited
3、hover
4、activate
的順序來書寫，這種也叫做 愛恨法則（love hate）
7、偽元素選擇器
生成并選中某個(gè)元素內(nèi)部的第一個(gè)子元素或最后一個(gè)子元素
寫法是加2個(gè)::
- before
- after
還可以添加
color等元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span::before {
content: "<";
}
span::after {
content: ">";
}
</style>
</head>
<body>
<p>這是我們學(xué)習(xí)<span>HTML</span>和<span>CSS</span>的一門練習(xí)課程</p>
</body>
</html>
樣式如下：
image.png
選擇器的組合
1、并且
首先p元素是有公共樣式的，首行縮進(jìn)了2個(gè)字，行高為2，同時(shí)
red類的字體需要為紅色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-indent: 2em;
line-height: 2;
}
p.red {
color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet laboriosam, sunt quisquam earum commodi facilis dolor perspiciatis et saepe eius ratione maiores aperiam magnam? Totam sint temporibus accusantium voluptate consequatur?</p>
</body>
</html>
image.png
2、后代元素 - 空格
比如我們想實(shí)現(xiàn)選擇 div里面的li元素，修改他的元素，而不影響外面的li元素，則可以用一個(gè)空格間隔開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red li {
color: #008c8c;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="red">
Lorem ipsum dolor sit amet.
<ul>
<li>Lorem.</li>
<li>Voluptate?</li>
<li>Iste?</li>
<li>Illo.</li>
<li>Eligendi?</li>
</ul>
</div>
<ul>
<li>Lorem, ipsum.</li>
<li>Odio, id!</li>
<li>Deserunt, nesciunt.</li>
<li>Commodi, deserunt.</li>
<li>Nemo, iusto.</li>
<li>Quae, quas?</li>
<li>Asperiores, facilis?</li>
<li>Ad, iusto!</li>
<li>Aperiam, libero.</li>
<li>Omnis, beatae.</li>
</ul>
</body>
</html>
image.png
3、子元素 - >
上面的例子，如果改寫一下css 則如下(樣式不變)
<style>
.red > ul > li {
color: #008c8c;
}
</style>
4、相鄰兄弟元素 -
可以選擇相鄰兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.special {
color: red;
}
.special+li{
color: #008c8c;
}
</style>
</head>
<body>
<ul>
<li>Lorem, ipsum.</li>
<li>Doloribus, eveniet.</li>
<li class="special">Quae, voluptate.</li>
<li>Facilis, autem?</li>
<li>Quas, numquam!</li>
<li>Officiis, itaque!</li>
<li>Nemo, quod.</li>
<li>Recusandae, a?</li>
<li>Ea, error!</li>
<li>A, officia.</li>
</ul>
</body>
</html>
image.png
5、 兄弟元素 - ~
選中元素后面出現(xiàn)的所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.special {
color: red;
}
.special~li{
color: #008c8c;
}
</style>
</head>
<body>
<ul>
<li>Lorem, ipsum.</li>
<li>Doloribus, eveniet.</li>
<li class="special">Quae, voluptate.</li>
<li>Facilis, autem?</li>
<li>Quas, numquam!</li>
<li>Officiis, itaque!</li>
<li>Nemo, quod.</li>
<li>Recusandae, a?</li>
<li>Ea, error!</li>
<li>A, officia.</li>
</ul>
</body>
</html>
image.png
選擇器的并列
多個(gè)選擇器，用逗號(hào)分割
.special {
color: red;
}
.special~li{
color: #008c8c;
}
p{
color: #008c8c;
}
以上代碼通過使用語法糖可以修改為如下,實(shí)現(xiàn)的效果是一致的
.special {
color: red;
}
.special~li,p{
color: #008c8c;
}
