本文详细介绍了CSS选择器的使用，包括伪类选择器如:link、:visited、:hover、:active，以及结构性伪类选择器如:nth-of-type()和:nth-child()。还讨论了CSS样式的继承原则、优先级规则以及盒子模型的概念，内容涵盖了选择器的权重比较、约分比较以及盒子模型的组成和应用。此外，还提到了box-sizing属性如何改变盒子模型的显示方式。
css选择器
伪类选择器：css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候用伪类来添加
具体写法：M:伪类{}
:link 访问前的样式 （只能添加给a标签）
:wisited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入时的样式 （可以添加给所有的标签）
:active 鼠标按下时的样式 （可以添加给所有的标签）
注意：如果四个伪类都生效，顺序为：L V H A
一般网站只能这样去设置： a{} ( link visited active ) a:hover{}
:after、:before 通过伪类的方式给元素添加一个文本的内容，使用content属性
代码如下：
div:after{ content:" ";color: ;}
:checked、:disabled、:focus 都是针对于表单元素的
结构性伪类选择器
nth-of-type() nth-child() 区别：type表示类型，只针对于一种 child表示孩子，包含所有
角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
代码如下：
<style>
li:nth-of-type(2){ background:red;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
注意：2n表示偶数，2n+1表示基数
first-of-type 第一项 | last-of-type 最后一项 | only-of-type 仅有一项
css样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit值）
代码如下：
p{ border:inherit;}
css优先级
相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式和外部样式：优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
单一样式优先级：style行间>id>class>tag>*>继承
注意：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
！important: 提升样式优先级，非规范方式，不建议使用（不能针对继承的属性优先级进行提升）
标签+类与单类：标签+类>单类
群组优先级：群组选择器与单一选择器的优先级相同，靠后写的优先级高
层次优先级
1、权重比较
ul li .box p input{} 权重：1+1+10+1+1
.hello span #elem{} 权重：10+1+100
注意：累加只针对于自己的等级，不能越级
2、约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}
css盒子模型
组成：content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距
content : 内容区域 width和height组成的
padding : 内边距（内填充）
只写一个值: 30 px（上下左右）
写两个值：30 px 40 px (上下、左右）
写四个值：30 px 40 px 50 px 60 px (上、右、下、左）
单一样式只能对应一个值：padding-left padding-right padding-top padding-bottom
margin: 外边距（外填充）
只写一个值: 30 px（上下左右）
写两个值：30 px 40 px (上下、左右）
写四个值：30 px 40 px 50 px 60 px (上、右、下、左）
单一样式只能写一个值：margin-left margin-right margin-top margin-bottom
注意：
1、背景颜色会填充到margin以内的区域（不包括margin区域）
2、文字会在content区域
3、padding不能出现负值，margin是可以出现负值
box-sizing:
盒尺寸，可以改变盒子模型的展示形态
默认值：content-box : width、height -> content
border-box : width、 height -> content padding border
使用场景:1、不用再去计算一些值2、解决一些百分比的问题
扫一扫
1068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
