CSS中选择器种类详解和优先级

最新推荐文章于 2024-04-27 19:27:33 发布

qq_39125445

最新推荐文章于 2024-04-27 19:27:33 发布

阅读量1k

点赞数 1

分类专栏： CSS

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS三大特性—— 继承、优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类　　

首先来看一下css选择符(css选择器)有哪些?

1.标签选择器(div)

2.id选择器(#ka)

3.类选择器(.ka)

4.后代选择器（ul li）

5.子代选择器（ul>li）

注意：只是子一代选择，后面的不会再选择，相比后代选择器更加安全。

6.兄弟选择器

注意：兄弟选择器都不会向前寻找兄弟

6.1相邻兄弟选择器（h1+p）

选择紧挨的下一个兄弟元素，使用li+li能使除第一个全部生效的原因，相对于每一个li都执行这个功能

6.2通用兄弟选择器(h1~p)

选择后面的带有指定元素的兄弟选择器

7.通配选择器（*）

8.属性选择器

8.1[attr]

带有这个属性的全部选择，比如a[href]，选择带有href的a标签。或者.b[src]就是带有src属性的b类选择器内容

8.2[attr=xxx]

选择属性为指定值的内容，这个属性必须完全相同满足，也就是下面只有一个class元素满足

 <style>
      [class=t1]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1">zhuyu</div>
</body>

这个就不满足了，因为有两个类元素

 <style>
      [class=t1]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1 t2">zhuyu</div>
</body>

必须像下面一样完全符合才行，多个才需要引号，不然不需要引号

    <style>
      [class="t1 t2"]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1 t2">zhuyu</div>
</body>

8.3[attr~=xxx]

这个就是符合属性之一就可以的

 <style>
      [class~="t1"]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1 t2">zhuyu</div>
</body>

8.4[attr|=xxx]

用于选择xxx或者xxx-开头的

<style>
      [class|="t1"]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1">zhuyu</div>//成功
   <div class="t1-zhu">zhuyu</div>//成功
   <div class="t1-yu">zhuyu</div>//成功
   <div class="t1_t2">zhuyu</div>//失败
</body>

8.5[attr^=xxx]

使用正则匹配以xxx开头的

<style>
      [class|="t1"]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1">zhuyu</div>//成功
   <div class="t1-zhu">zhuyu</div>//成功
   <div class="t1-yu">zhuyu</div>//成功
   <div class="t1_t2">zhuyu</div>//成功
</body>

8.6[attr$=xxx]

使用正则匹配以xxx结尾的，所以多个类也没关系

 <style>
      [class$="t1"]{
          color:red;
      }
    </style>
</head>
<body>
   <div class="t1">zhuyu</div>//成功
   <div class="sd zhu-t1">zhuyu</div>//成功
   <div class="sb yu-t1">zhuyu</div>//成功
   <div class="t2_t1">zhuyu</div>//成功
</body>

8.7[attr*=xxx]

使用正则匹配含有这个字符串就行，不管怎么排列，有多少个

9.伪类选择器

9.1标记状态的伪类选择器

：link,只能运用于a标签

：visited,只能运用于a标签

：hover,可以运用在任何标签

：active,可以运用在任何标签

：focus，可以运用在能够获取焦点的标签

9.2筛选功能的伪类

：empty

    <style>
        p:empty{
            width: 200px;
            height: 40px;
            background-color: red
        }
    </style>
</head>
<body>
    <div>
        <p></p>//成功
        <p>zhu1</p>//失败
        <p>zhuyu2</p>//失败
    </div>
</body>

:checked

只有opera支持input:checked这个选择器，这个选择器的作用是选择复选框，单选框已经被选中的了给他绑定css样式

:disabled，.enabled

给已经禁用的input框增加样式

<style> 
            input:enabled{
                background: yellow;
            }
            input:disabled
            {
            background-color:#ff0000;
            }
            </style>
            </head>
            <body>
            <label for="text1">用户名</label>
           <input id="text1" type="text">//黄色
           <label for="text2">密码</label>
           <input id="text2" type="text">//黄色
           <label for="text3">确认密码</label>
           <input id="text3" type="text" disabled="disabled">//红色
            </body>

p:first-child

例子：p:first-child,选择其属于父元素的首个p元素，满足条件：是否是p元素，这个p元素是否在第一个。

:last-child

例子：p:last-child,选择其属于父元素的最后一个子元素。满足条件：是否为p元素，是否在最后一个

p:first-of-type

解释：选择属于父元素的第1个p元素

p:last-of-type

解释：选择属于父元素的最后一个p元素

:nth-child(an+b)

选择属于其父元素的第几个元素是指定元素。p:nth-child(2)满足条件:是p元素，这个元素是其父元素的第2个

:nth-last-chid(an+b)

选择属于其父元素的最后第几个元素是指定元素。同上类似

:only-child

属于其父元素的唯一一个指定元素，也就是他的父元素只能有他一个

:only-of-type

他的父元素可以有多个，但是指定元素类型只能有一个

9.3伪元素选择器

p::first-line,选择p元素的首行

::first-letter，首字母设置样式

::before

::after

::selection，点击选中样式。

10.交集选择器

.li.active

11.并集选择器

ul,li,a

css优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

同一级别中后写的会覆盖先写的样式

上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样

复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

复制代码

到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色

另外一种理解方式：

　　CSS优先级：是由四个级别和各级别的出现次数决定的。

　　四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

　　优先级的算法：

　　每个规则对应一个初始"四位数"：0、0、0、0

　　若是行内选择符，则加1、0、0、0

　　若是 ID选择符，则加0、1、0、0

　　若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

　　若是元素选择符/伪元素选择符，则分别加0、0、0、1

　　算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。　　

需注意的：

　　①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;

　　②、优先级相同时，则采用就近原则，选择最后出现的样式;

　　③、继承得来的属性，其优先级最低;

　　!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

　　*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

CSS选择器的解析原则

以前一直认为选择器的定位DOM元素是从左向右的方向，查看了网上的相关资料之后才发现原来自己一直都是错的。郑重的声明选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素。为什么CSS选择器是从右往左解析？？？

简洁、高效的css

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

1.不要再ID选择器前使用标签名

解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

2.不要在类选择器前使用标签名

解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

3.尽量少使用层级关系；

#divclass p.colclass{color:red;}改为 .colclass{color:red;}

4.使用类选择器代替层级关系（如上）

qq_39125445

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS中选择器种类详解和优先级

CSS三大特性——继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类　　首先来看一下css选择符(css选择器)有哪些?1.标签选择器(div)2.id选择器(#ka)3.类选择器(.ka)4.后代选择器（ul li）5.子代选择器（ul&gt...
复制链接

扫一扫