今天二白连续再更一篇，把上篇文章剩下的一些小知识再说一说
一、属性选择器
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
例：需求：有title属性的标签，颜色变为红色
<!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>
/* 需求：有title属性的p标签，颜色变为红色 */
[title]{
color: red;
}
</style>
</head>
<body>
<h1 title="a" id="abcd" class="ss">满江红·写怀</h1>
<h3 title="ab">怒发冲冠，凭栏处、潇潇雨歇。</h3>
<p title="abc">抬望眼，仰天长啸，壮怀激烈。</p>
<div title="abcdab">三十功名尘与土，八千里路云和月。</div>
<div>莫等闲，白了少年头，空悲切！</div>
<p>靖康耻，犹未雪。臣子恨，何时灭！</p>
<p>驾长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>
二、伪类选择器
1.伪类（不存在的类，特殊的类）
不是指特定的某个元素，而是指某个状态，例如第一个，最后一个，鼠标移入，鼠标点击 等等
在所有的元素中进行排序
：first-child 第一个元素
：last-child 最后一个元素
：nth-child(n) 选中第n个元素
n 所有的元素
2n/even 选中偶数元素
2n+1/odd 选中奇数元素
在同类型的元素中进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type(n) 选中第n个元素
2.：not()否定伪类
将符合条件的元素从选择器中去除
三、元素的伪类
这里就用代码演示
<!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>
/* 需求：鼠标移入，字体变大到30px */
/* ：hover 用来表示鼠标移入的状态 */
p:hover{
font-size: 30px;
color: red;
}
/* 需求：鼠标点击后，增加背景色pink */
/* :link,:visited 是超链接a标签独有的两种状态，由于隐私问题，这两种状态只能被设置字体颜色 */
/* :active 鼠标点击后的状态 */
a:active{
background-color: orange;
}
/* 表示没有被点击过的链接 */
a:link{
color: orange;
}
/* 表示被访问过的链接 */
a:visited{
color: green;
}
/* 面试题：a标签的四种状态，在设置时有没有先后顺序?
:link :hover :active :visited
*/
</style>
</head>
<body>
<p>反大貂二得的导五甲。</p>
<a href="#">可人种而，天者如土。</a>
</body>
</html>
四、伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
::first-letter 表示第一个字符
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content(添加)使用
五、继承
样式的继承（继承祖先的资产）
定义：为一个元素设置的样式，同时也会应用到它的后代元素上
优势：方便我们开发，将一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
注意：并不是所有的样式都会被继承，比如：背景相关的
继承性
可继承： font-size font-family color line-height ;
不可继承 ：border padding margin width height ;
六、选择器的权重
样式冲突：通过不同的选择器选中同一个元素，进行一样的样式设定
发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定
分享个面试题：
面试题：你平时都用哪些选择器，这些选择器的优先级能不能说一说
答：
行内样式，标签选择器，id选择器，class选择器，关系选择器，属性选择器
选择器权重
内联样式 1000
id选择器 100
属性选择器/类选择器 10
标签选择器 1
通配选择器 0
继承样式 没有
这里的数字仅代表大小，不是实际存在的
注意：
1、如果选择器权重一样，谁靠下就执行谁
2、如果选择器是交集选择器，那么需要将选择器的权重相加，最后谁重就听谁的
3、如果选择器是并集选择器，则分别计算选择器的权重，谁高听谁的
4、选择器的权重再累加，也不会超过它的上一级选择器的权重
5、通过！important 将选择器的权重提至最高
一般情况下，！important 要慎用
可以用来检测bug，检测是否是权重问题
用来更改各种css框架的样式
给一个元素设置样式，怎么设置都没有反应
选择器权重问题
选择器没有选中当前元素
分享个小练习
<!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>
.w{
color: blue;
font-size: 22px;
}
.f{
color: brown;
font-size: 18px;
}
#down{
position: relative;
top: 6px;
}
</style>
</head>
<body>
<div>
<center>
<img src="./img1.jpg" alt="海报"><br>
<img id="down" src="./ic_new.png" alt="新">
<strong><span class="w">血红海岸</span> <span class="f">7.2</span></strong>
</center>
</div>
</body>
</html>
二白今天就写这么多
