CSS选择器

用于定制标签样式，集中管理某一类元素

优先级最低；用 * 来表示
慎用，该选择器会选中整个页面所有的标签，然后对其修改
在大型网站中，该选择器会被禁止使用（样式容易混乱）

*{
width:100px;
}

用标签名定义
当前页面中所有的叫做这个名字的标签，全部绑定样式

div{
width : 100px;
height : 100px;
background : red;
}

用英文状态下的句点 . 来标识，名称为自定义
命名时，可以包含数字、下划线，但不能以数字开头
具有重用性，可以给多个标签使用，使用时给对应的标签绑定

.ball{
width : 50px;
height : 50px;
background : green;
}

<div class=“ball”> </div>
<p class=“ball”> </p>

用 # 来标识，自定义名称
不具有重用性，具有唯一性
多个标签同时使用，会造成不可预知的错误
id选择器比class选择器的优先级高

#so{
color：red；
}

<div id = “so”> Hello </div>

只能用于大批量的样式（大型项目中代替通用选择器）
如果需要给个别标签去写样式，使用class或id

p,span,div{
color：red；
}

<div id = “so”> Hello </div>

作用于指定标签的下一层标签,标识符号为" > "
由于继承性的问题，会继续向下影响指定标签下所有的标签
但是，子集标签下的标签样式可以更改
适用场景：制作每级格式都不同的列表

.list>li{
background : red;
}

作用于指定标签的以下的所有标签，以空格作为标识
不同于子代选择器，指定标签下全部标签样式都不可以更改

.list li{
background : red;
}

两个要求同时满足时，才可以绑定样式
无标识符号，直接写

p.p1{
color : red;
}
<p class=“p1”>我是段落</p>

来源：CSDN

作者：Mrqin-shen

链接：https://blog.csdn.net/qinshensx/article/details/104027474

标签