标签选择器

通过标签的名字，修改css样式

div{    width: 200px;    height: 300xp;}

通配符选择器

*选择页面中所有的元素

* {    margin: 0;    padding: 0;}

一级子元素选择器

选择某个父元素的直接子元素

后代选择器是选择父元素的所有子孙元素，一级子元素原则只选择第一级子元素，不会再向下查找元素

.box > p {    background-color: red;}

id选择器

通过id查找页面中唯一的标签，用#表示id

#dada {    width: 200px;    height: 200px;}

class选择器

通过特定的class来查找页面中对应的标签

.box{    width: 200px;    height: 300px;}<div class="box"></div>

伪类选择器

:hover鼠标移入某个元素

.box:hover {    color: red;}

:before在某个元素的前面插入内容

div:before {    content: '-dadaqianduan';    background-color: yellow;    color: red;}

:afer在某个元素的后面插入内容

div:after{    content: '-dadaqianduan';    color: red;}

群组选择器

• 可以对多个不同的选择器设置相同的样式

.box, .box1, .box2 {    width: 200px;    height: 300px;}

选择器的优先级

当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。

通过测算那个选择器的权重值最高，应用哪一个选择器的样式

权重计算方式

• 标签选择器：1
• class选择器：10
• id选择器：100
• 行内样式：1000
• !important最高级别，提高样式权重，拥有最高级别

注意：

如果两个选择器的权重值一样高，应用距离对象最近的css样式

原著是一个有趣的人,若有侵权,请通知删除