关系选择器
子元素选择器 父元素>子元素{}
后代选择器（范围更大） 祖先 后代{}
兄弟选择器（只选下边的） 上一个+下一个{} //必须紧挨着
兄~弟{} //后面所有的兄弟
属性选择器
元素[属性]{}
元素[属性=值]{}
元素[属性值^=值]{} //选择指定值开头的元素
元素[属性值$=值]{} //选择指定值结尾的元素
元素[属性值*=值]{} //属性值中含有指定值
伪类选择器 ul>li:first-child{}
ul>li :last
ul>li :nth-child(){} //选中任意一个（）内填0，1，2，3……
//（）内2n+1或odd选奇数位
//even 偶数
//以上元素都是按总顺序排列；不单是<ul>中的<li>;还必须是第一个元素（所有子元素排序）
//而与之相对的是(表示同类型作比较排第几）
:first-of-type
:nth-of-typy()
无论列表怎么变，只对列表中第一个子元素操作
:not()除了。。。
除了第三个都设置黄绿色
4.超链接伪类（a元素伪类）
a:link{ color:red;} //没有访问过的链接（正常的链接）
a:visited {color:yellow;} //访问过的链接（只改颜色）
a:hover{ } //当鼠标移动到链接位置；链接变换形态
a:active{} //点击别松手时变换形态
5.伪元素
首字母下沉
<p>你好</p>
……
p::first-letter{} //选中首字母
p::first-line {} //首行
p::selection{color:red;} //选中变色
<div>中特殊位置
div::before{} //字符起始位置
div::after{
content:'hello'; //字符结束位置添加hello
}
结合content 使用（通过css添加的东西无法被选中）
6.样式的继承（对一个元素设置样式；也会应用到后代元素中）
并不是所有的都继承；比如背景相关的
<style>
p{
background-color:red; //对p元素设置背景颜色
}
</style>
这种就不会被继承
7.选择器的优先级（依次递减）
对同一元素改动同一样式
10个类权重相加还是小于id的权重
#d{color:red;} //权重 100
div#d{color:blue;} //权重 100+1
如果权重相同，使用后面的
分组选择器例外(单个计算）
<style>
*{ //统配选择器
color:red;
}
div{color:blue;} //元素选择器
</style>
<div>
<p>我是红色</p> //统配权重0；继承没有权重所以听统配的*{}
</div>
!important获得最高权重
8.长度单位
a.像素
b.相对于父元素的百分比(一起变）
c.em根据字体大小改变
d.rem 相对于根元素（html)字体大小
颜色单位
RGB值（三原色不同浓度配成的颜色）
rgb(红色，绿色，蓝色） //每一个值0-255（0-100%）
RGBA (+不透明度；1完全不透明；.5半透明； 0完全透明）
十六进制#001122 (数值00-ff）
本文地址：https://blog.csdn.net/weixin_45907018/article/details/107294579
黄山市民网：https://www.huangshanshimin.com/
