拉勾教育css学习笔记3.6 css选择器以及属性

CSS（二）

6.CSS选择器

选择器：选择要添加样式的html标签的一种方法、模式。

将学习css2.1的七种选择器：

基础选择器：标签选择器、id选择器、类选择器、通配符选择器。

高级选择器：后代选择器，交集选择器，并集选择器。

基础选择器—标签选择器

书写方式：通过同名的标签名进行选择。

注意：标签选择器可以选择所有的同名标签，会忽视HTTP嵌套关系，不管嵌套多深都会被选中。

优点：可以选中所有的同名标签，效率高。

缺点：只能实现全选，不能对局部进行选择。

基础选择器—id选择器

通过标签上的id属性去选择标签，解决标签选择器全选的缺点，但单选同时是id选择器的缺点

书写方式：**#**id属性值

注意：只能选中一个标签，和其id属性值，注意id的命名规则：必须以字母开头，后面可以有字母数字，下划线横线。区分大小写，每个ID属性值必须是唯一的，不能和其他的ID重名。

基础选择器—类选择器

通过class属性去选择标签

书写方式：.class（.属性值）

选择范围：页面中所有class属性值相同的标签。注意class命名规则：字母开头后面可以有字母，数字，下划线，横线。严格区分大小写，class属性可以和其他的class相同。

注意：类名可以重复，而且一个标签可有多个类名，如：

<p class="demo ps">aiudhuiha</p>

然后通过css的两个.demo .ps格式去改变其样式即可。

类选择器特殊应用：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性。

这些属性在页面中会被常用。这样后期不需要多次出现属性，每当有需求的时候给类名添加相应的标签。

基础选择器—通配符选择器

星号：*

优点：可以实现全选

缺点：选择效率低，会让某些不需要加载的标签也加载，导致浏览器资源浪费。

实际应用：在一些小的案例中，可以通过通配符选择器来规定所有的页边距等…大型网站标签多的,不要用。

高级选择器—后代选择器

通过标签之间存在的嵌套关系去选择元素，基本组成部分是基础选择器

也叫做包含选择器

书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级

<style>

​    ul li p{
​      background-color: red;
​    }
</style>

高级选择器—交集选择器

通过一个标签之上，满足所有的基础选择器的需求去选择标签。

书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。

比较常见的标签和类的交集

p.demo{
​				font-size: 40px ;
}

如上就是标签和类的交集选择器，标签写在前面。

注意：ie6以下不兼容。

高级选择器—并集选择器

所有单独选择器选中的标签的并集集合

书写方式：将多个选择器中间用逗号进行分隔，注意最后一个不能写逗号。

h2,p,.demo{
				font-size: 40px ;
}

将两个选择器合并，节省代码量。

7.css的继承性

继承性的应用:可以将页面中最多的文字样式设置给一个较大的祖先比如,后期的后代标签可以进行继承，节省代码量

8.css的层叠性

同类型样式属性共同加载时，会触发层叠性，即只执行一个样式

选中目标标签层叠方式：

1. 根据基础选择器的权重，权重高的层叠权重低的，选择范围越大，权重越小。
2. 高级选择器的比较方法，依次比较组成高级选择器的id个数，类个数，标签个数（根据选择范围）如果前面能比较出大小就不比较后面，如果前面相等就继续比较，直到得出结果为止。
3. 如果选择器权重都相同，那么有个就近原则，需要比较css代码中的书写顺序。

祖先级的层叠方式：

如果选择器选中的是祖先元素，文字的样式可以被继承。

1. 以较就近原则,近的层叠远的，即优先继承父类，然后是祖父类...
2. 以较就近原则。
3. 如果权重相同，比较css书写顺序，后面层叠前面的

important关键字

如果在比较选择器权重的过程中，遇见一个！important关键字，可以将某条css样式出现的权 重提升到最大

书写位置：在某个css属性的属性值后面空格加！important.

注意：就近原则中不能加！important，会失效。

行内式

高于所有的其他选择器，但是低于important