开发者学堂课程【前端开发CSS基础：CSS 选择器（下） 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4256
CSS 选择器（下）
内容介绍：
一、属性选择符
二、伪类选择符
三、伪对象选择符
四、选择器的优先级
一、属性选择符
1.属性：
例：写一个 a 标签， href 就是它的属性。
2.写法:
（1）当前元素[属性] ()。
给它一个属性值#，再给它一个内容 haha，为了方便使用内部样式添加 css 样式，写一个 style 标签，当前元素为 a，加中括号，它的属性是 href，后跟花括号，内容显示颜色为红色。属性选择器的写法就是选择具有指定属性的当前元素。
（2）当前元素[属性=“属性值”]{}。
再写一个 a 标签，给它一个属性值，给它一个内容。
例：
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset:"UTF 8"»
<title></title>
<style >
a [hre f= "www, baidu, com"] {
font-size: 50px;
}
</style>
< /head>
<body>
<a hre f= "www . baidu. com">百度一下</a>
<a href= "www , baiffdu. com">百度一下</a>
<a href= "www , bagg1du. com">百度一下< /a>
<a href- "www . baikkdu. com">百度一下</a>
</body>
< /html>
就可以看到只有属性值为 www, baidu, com 的 a 标签才会变大，所以这种写法是选择属性与属性值均匹配的当前元素。
二、伪类选择符
1.定义:
它允许给 html 标签的某种状态设置样式。
（1）元素: link: 设置超链接 a 在未被访问前的样式。
（2）元素: visited: 设置超链接 a 在其链接地址已被访问过时的样式。
（3）元素: hover: 设置元素在其鼠标悬停时的样式。
（4）元素: active: 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
2.注意：
（1）a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
（2）可靠的顺序是: l(link)ov(visited)e h(hover)a(active)te，即用喜欢 (love) 和讨厌 (hate) 两个词来记忆。
例：写一个 ul 标签，里面嵌入一个 li 标签，li 标签里面写一个 a 标签和 href 属性，给它一个内容伪类选择符，先设置一个基本样式，字体大小，让它变大一些，要按照它的顺序书写。
<!DOCTYPE html>
<html lang "en">
< head>
<meta charset="UTF- 8">
<title></title>
<style >
ul li a{
font-size: 30px ;
}
ul li a:link{
color: blue ;
}
ul li a:visited {
color: grey ;
}
ul li a:hover {
color: aquamarine ;
}
ul li a:active {
color: red ;
}
</style>
< /head>
<body>
<ul>
<l1>
<a href="#">伪类选择符</a>
</li>
</ul>
</body>
</html>
三、伪对象（伪元素）选择符
1.元素: before{} ∶ 设置在对象前发生的内容。用来和 content 属性一起使用，并且必须定义 content 属性。
2.元素: after{}: 设置在对象后发生的内容。用来和 content 属性一起使用，并且必须定义 content 属性。
四、选择器的优先级
! important >内联>ID>类>标签[伪类[属性选择器>伪对象>继承>通配符
优先级不同显示的样式不同。
注意:! important 要写在属性值的后面，分号的的面。
例：
P{
color : red ! important ;
}
数值越大，优先级越高。
选择器 |
优先级数值 |
! important |
无穷大 |
内联 |
1000 |
ID |
100 |
类 |
10 |
标签 |
1 |
举例代码如下：
< ! DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title></tit le>
<style>
Span{
/*1*/
color :red ！importance；
}
p span {
/*1+1*/
color :blue；
}
p .sc{
/*I+10=11*/
color :aqua；
}
p #si{
/*1+100=101*/
color :green；
}
</style>
</head>
< body>
<p>
<span class="sc" id="si">优先级< /span>
</p>
< /body>
</html>
