CSS中常用选择器及权重计算

CSS中常用选择器及权重计算

 

目前常用的选择器有七种，分别是

1， 标签选择器

写法如下

标签名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用：会将所有的这类标签都加上相同的css属性

 

2， 类选择器

.类名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用：会选择到页面上所有拥有这个类名的元素

3， id选择器

#id名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

...........

}

作用：元素的id值是唯一的，只能对应于文档中某一个具体的元素。

 将拥有这个id名的唯一元素加上css样式。

补充：

1、id选择器与类选择器的区别

   a、id选择器 相当于人的身份证

     一个id名只能设置给一个元素并且元素只能有一个id

   b、class类选择器  相当于人的名字

多个元素可以设置同样的class一个元素也能有多个不同的class名

id选择器与类class选择器的命名规则

   1、命名的取值规范只能是：0-9，a-z，A-Z，_，-，

   2、不能以数字开头

 

4， 并集选择器

 

作用：将两种类型的元素全部选择出来。

代码：

选择器1 ，选择器2｛

属性名1：属性值1;

属性名2：属性值2;

              .......

｝

5， 交集选择器

 

作用：从两个集合中选择中它们相同部分：

代码：

选择器1选择器2 {
              属性名1：属性值1;

               属性名2：属性值2;

作用：从两个集合中选择中它们相同部分：

代码：

选择器1选择器2 {
              属性名1：属性值1;

              属性名2：属性值2;

              .......

}

 

6， 后代选择器

 

作用：选择一个标签中所有后代标签里满足条件的标签。

代码：

 选择器（空格）选择器选择器 ｛

       属性名1：属性值1;

              属性名2：属性值2;

              .......

 

｝

 

7， 子代选择器

 

作用：得到 当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）

代码：

选择器>选择器｛

       属性名1：属性值1;

       属性名2：属性值2;

              .......
｝

 

8， 通配符

*

作用：用于作用于页面上所有的标签.

代码：

<style>

        *{

              属性名1：属性值1;

              属性名2：属性值2;

              .......

}

</style>

注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。

二，权重的计算

在了解权重的计算之前先看一下优先级

优先级：！important>行内样式>id选择器>类选择器>标签选择器>通配符>浏览器默认样式>继承

 （0，0，0，0）

第一个0对应的是行内样式的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。