css选择器

标签选择器

• 通过标签的名字，修改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样式