css选择器

css选择器的分类

1.通配符选择器

通配符选择器匹配html中所有元素

*{
    margin: 0;
    padding: 0;
}

2.标签选择器

标签选择器为html指定的特定样式

p{
    font-size: 16px;
    color: red;
}

3.类选择器

类选择器可以为标有特定class的html匀速指定特定样式。类选择器以"."来定义

.box{
    width: 1200px;
    margin: 0 auto;
}

4.id选择器

id选择器可以为标有特定id的html元素指定特定的样式，id选择器以“#”来定义

#id{
    margin: 10px;
    background: red;
}

5.派生选择器

派生选择器允许根据文档的上下关系来确定某个标签的样式

/* 指定p标签下的所有span标签样式 */
p span { color: red; }
/* 指定p标签下的子元素span标签样式 */
p>span { color: red; }

6.分组选择器

对选择器进行分组，这样被分组的选择器可以分享相同的样式，用逗号将分组的选择器分开

h1,h2,h3,h4,h5,h6{
    font-size: 16px;
}

css选择器继承

CSS继承是指被包在内部的标签拥有外部标签的样式性质

CSS的一个主要特征就是继承，它依赖于祖先-后代关系的，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以用于它的后代

实例

<style>
    p {
        font-size: 16px;
        color: red;
        font-weight: 700;
    }
    p span {
        color: green;
    }
</style>
<p>
    成功的 <span>秘诀</span>就是每天都比别人多努力一点
</p>

css选择器优先级

多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况

优先级如下：（外部样式）<（内部样式）<（内联样式）

优先权重值

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值

• !important，加在样式属性值后，权重值为 1000
• 内联样式，如：style=””，权重值为1000
• D选择器，如：#content，权重值为100
• 类、伪类，如：.content、:hover 权重值为10
• 标签选择器，如：div、p 权重值为1

css选择器优先级法则

1. 选择器都有一个权值，权值越大越优先
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式
4. 继承的CSS 样式不如后来指定的CSS 样式
5. 在同一组属性设置中标有“!important”规则的优先级最大