海阔天空

手机扫码查看

css选择器

ID选择器
css:#id{}
html:id=”id”

注意：
1.一个页面中只能使用一个id，不可重复
2.命名规范：字母和数字以及下划线，但数字不能开头
3.命名方式：驼峰命名、下划线、短线式

Class选择器
css:.class{}
html:class=”class”

注意：
1.class选择器可以复用
2.可以添加多个css样式
3.多个样式的时候，优先级根据css决定

标签选择器
css:div{}
html:<div>
用来去除标签默认的样式以及在复杂的选择器中，如层次选择器

群组选择器
css:div,span,p{}
可以通过逗号分隔，给多个不同的选择器添加统一的css样式

通配选择器
css:*{}
去掉所有标签默认样式，不建议使用

层次选择器
后代： M N
父子：M>N
兄弟：M~N
相邻：M+N

属性选择器
M[attr]:M元素选择指定 为attr属性的集合
M[attr=value]:完全匹配
M元素选择指定 为attr属性和value值的集合
M[attr*=value]:部分匹配
M元素选择指定 为attr属性并且包含值为value的集合
M[attr^=value]:起始匹配
M元素选择指定 为attr属性并且起始值为value的集合
M[attr$=value]:结束匹配
M元素选择指定 为attr属性并且结束值为value的集合
M[attr1][attr2]:组合匹配
M元素选择满足多个属性的集合

伪类选择器1
CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加
:link，访问前的样式，只能给a标签加
:visited，访问后的样式，只能给a标签加
:hover，鼠标悬浮的样式，可以给所有标签添加
:active，鼠标按下的样式，可以给所有标签添加
注意：要想四个伪类都生效，注意顺序：LVHA

伪类选择器2
:after，往后面添加内容
:before，往前面添加内容
:checked
:disabled
:focus

结构伪类选择器
:nth-child(下标)
下标可以是数字也可以是n，n是从0到无穷大
:first-child：第一个节点
:last-child：最后一个节点
:only-child：只有一个节点才可以用