选择器
选择器：精准选中想要的元素
简单选择器
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、属性选择器
根据属性名和属性值选中元素 具体更多可以查阅mdn，点击这里直接跳转查看
<!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;
}
[href="https://sina.com"] {
color: blue;
}
[href="https://baidu.com"]{
color: #008c8c;
}
[href$="baidu.com"]{
color: #008c8c8;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<a href="https://baidu.com">百度</a>
<a href="https://sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</a>
</body>
</html>
6、伪类选择器
选中某些元素的某种状态
- hover 鼠标悬停移动的状态
<!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>这是一个标题</h1>
<a href="https://baidu.com">百度</a>
<a href="https://sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</a>
</body>
</html>
这个就是鼠标悬停到文字上的颜色样式改变
- activate 鼠标按下的时候发生改变
<!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>这是一个标题</h1>
<a href="https://baidu.com">百度</a>
<a href="https://sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</a>
</body>
</html>
- link 超链接未访问时的状态
<!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>这是一个标题</h1>
<a href="https://baidu.com">百度</a>
<a href="https://sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</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>这是一个标题</h1>
<a href="https://baidu.com">百度</a>
<a href="https://sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</a>
</body>
</html>
但是如果四个伪类都需要用到的话需要按照
1、link
2、visited
3、hover
4、activate
的顺序来书写，这种也叫做 爱恨法则（love hate）
7、伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
写法是加2个::
- 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>这是我们学习<span>HTML</span>和<span>CSS</span>的一门练习课程</p>
</body>
</html>
样式如下：
image.png
选择器的组合
1、并且
首先p元素是有公共样式的，首行缩进了2个字，行高为2，同时
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、后代元素 - 空格
比如我们想实现选择 div里面的li元素，修改他的元素，而不影响外面的li元素，则可以用一个空格间隔开
<!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、 兄弟元素 - ~
选中元素后面出现的所有元素
<!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
选择器的并列
多个选择器，用逗号分割
.special {
color: red;
}
.special~li{
color: #008c8c;
}
p{
color: #008c8c;
}
以上代码通过使用语法糖可以修改为如下,实现的效果是一致的
.special {
color: red;
}
.special~li,p{
color: #008c8c;
}
