5. CSS选择器和优先级

1. CSS 选择器有哪些？

• 标签选择器

p{
    color:red;
}

• id选择器

#p1{
    font-size:30px;
}

• class选择器

.box{
    width:100px;
    height:100px;
}

• 后代选择器

.box .text{
    font-size:18px;
}

• 子代选择器

.box>.text{
    color:red;
}

• 兄弟选择器

.act+li{
    background-color:blue;
}
.act~li{
    background-color:green;
}

• 交集选择器

.item.active{
    opacity:1;
}

• 并集选择器

.box .inner,
p,
.item.mr0{
    color:red;
}

• 属性选择器

p[title]{
    color:blue;
}
p[title="bufan"]{
    font-size:24px;
}

• 伪类选择器

.text:hover{
    color:orange;
}
input:focus{
    color:red;
}
input[type="checkbox"]:checked+label{
    color:blue;
}
li:nth-child(4n){
    margin-right:0;
}

2. CSS优先级算法如何计算？

当设置样式冲突时,选择器优先级高的设置的样式生效!

从高往低: !important > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符和继承属性

组合选择器的权重是累加

!important的使用

p{
    font-size:24px !important;
}
/* 对于选中的p元素,字号强制设置为24px,比行内样式优先级要高 */