css选择器总结和三大特性

来源：互联网发布：三维激光扫描数据编辑：程序博客网时间：2024/06/09 19:52

3.10选择器总结

除了内联样式（用style属性描述的），对于样式的描述

#tt{

font-size:24px;

}

div{

background-color:red;

}

样式的描述包括两部分:即选择器和样式内容

样式内容：是键值对形式描述样式的细节，比如字体大小、样色、高度、宽度等

选择器：描述后面的样式施加到哪些目标，或者说是根据某个依据来选择应用样式的目标

根据选择依据的不同，就产生了各种不同的选择器

1.元素选择器

按照标签（元素）的名称来选择相应的目标

div{

background-color：red

}

2.id选择器

根据元素的id属性来选择，比如下例中的选择器就是选中id=“tt”的目标，书写格式是#idname

#tt{

font-size：24px

}

3.类选择器

根据元素的class属性来选择

根据元素的class属性来选择，比方下例中的选择器选中class=“tt”的元素，其书写格式是：classname

.tt{

font-size：24px

}

4.属性选择器

根据属性的特性来选择应用样式的目标，所以从这个意义上来讲，它包含了id class选择器，书写格式为：

[title]:选择设置title属性的元素

[title=“tt”]：选择title属性等于“tt”的元素

[title^=“tt”]：选择title属性以“tt”开头的元素

[title$=“tt”]：选择title属性以“tt”结尾的元素

[title~=“tt”]：选择title属性包含完整“tt”单词的元素

[title*=“tt”]：选择title属性包含“tt”的元素

5.关系选择器

根据元素见的家族关系来选择目标

E F：在选择器E选中的目标中再去选中后代满足F的选择器目标

E>F：选择直接后代

E+F：选择第一个“弟”元素

E~F：选择所有“弟”元素

6.伪类、伪元素选择器

伪元素：其效果与增加一个元素来实现的效果等价，所以称之为伪元素

伪类：其效果与增加一个类来实现的效果等价，所以称之为伪类

7.组合选择器

多个选择器使用同一个样式描述，以逗号隔开

4.css三大特性

4.1继承

子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承。比如人可以从父母继承姓、肤色等，但性格不能继承。

<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            font-size: 24px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        这是div1中的内容
        <div id="div2">
            这是div1的后代div2中的内容
        </div>
    </div>
</body>

结果：

div2虽然没有设定这种样式，但实际上却使用了该样式，说明样式从它的父代div1那里继承而来。

通过开发者工具可以进一步佐证继承的存在

但并不是所有的属性都可以继承

#div1{
    font-size: 24px;
    color: red;
    border: 2px solid green;
}

结果：

从结果反映出来，div2并没有边框，也就是说border没有被继承。

哪些属性可以被继承，哪些属性不能被继承？

4.2层叠性

华鑫公司发了两条通知

通知一：为祝贺华鑫成功上市，所有华鑫员工本月发奖金500元。

通知二：为庆祝中国共产党成立96周年，公司决定给每位党员加发补助96元

华鑫员工张三（中共党员）可以领取奖金500元+补助96元

因为选择器一（华鑫员工）和选择器二（党员）都选中了张三，那他领取的福利就可以进行叠加。

4.3优先级

在现实生活中当多条相互冲突的规则施加到同一事物时，也必须指定一个规则，也就是优先级。

从系列实验中可得到css选择器优先级的结论

内联>id选择器>类选择器>元素选择器

内部样式>外部样式

阅读全文

0 0