【前端工程师手册】30分钟搞清楚选择器和权重

boredream 发布于2019-08-30 14:10 / 1325人阅读

有哪些选择器 基本选择器

通配选择器（＊）

ID选择器（#ID）

类选择器（.className）

元素选择器(tagName)

后代选择器（a b）

子元素选择器(a>b)

相邻后面兄弟元素选择器(a + b)

通用后面兄弟选择器（a 〜 b）

群组选择器（selector1,selector2,...）

这里面平时不太常用的选择器有相邻后面兄弟选择器和通用后面兄弟选择器
首先，很多资料上把它们叫做相邻兄弟选择器和通用兄弟选择器，我觉得这样会有一定的误导意义，
例如：
`


    1
    2
    3
    4
    5
    6
    7
    8
    9

li {
    list-style: none;
    height: 20px;
    width: 20px;
    background: red;
    margin: 10px;
    border-radius: 10px;
    text-align: center;
    color: white;
    float: left;
    line-height: 20px;
}

当使用相邻兄弟选择器时：

.l3 + li {
    background: green;
}

效果为：

可以看出相邻兄弟选择器只会选择它后面的一个兄弟元素。
当使用通用兄弟选择器：

.l3 ~ li {
    background: green;
}

效果为：

可以看出来通用兄弟选择器会选择它后面所有的兄弟元素

属性选择器

E[attr]：只使用属性名，但没有确定任何属性值

E[attr="value"]：指定属性名，并指定了该属性的属性值

E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说big-name）;

属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配

伪类选择器

动态伪类

在链接中常看到的锚点伪类：link、visited、hover、active

UI元素状态伪类

例如 :enabled，:disabled，:checked等，这些主要是对一些表单元素操作。
比较常见的如"type="text"有enable和disabled两种状态，前者为可写状态后者为不可写状态。

CSS3的:nth选择器

first-child: 选择某个元素的第一次的出现

last-child: 选择某个元素的最后一次的出现

nth-child(): 选择某个元素的一个或多个特定的条件的出现

权重如何计算

根据样式所在位置，对元素的影响也有关系：内联样式（标签内style形式） > style标签 > link标签
根据选择器的类型，id选择器 > 类、属性选择器和伪类选择器 > 元素和伪元素
一般来说我们的计算方式为，从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

参考资料：
你应该知道的一些事情-css权重
css选择器-基本选择器
css选择器-属性选择器
css选择器-伪类选择器

服务器托管 idc机房托管 30分钟云服务器网络电话免费30分钟搞清前端前端工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115832.html

【前端工程师手册】30分钟搞清楚选择器和权重

有哪些选择器基本选择器通配选择器（＊） ID选择器（#ID）类选择器（.className）元素选择器(tagName) 后代选择器（a b）子元素选择器(a>b) 相邻后面兄弟元素选择器(a + b) 通用后面兄弟选择器（a 〜 b）群组选择器（selector1,selector2,...）这里面平时不太常用的选择器有相邻后面兄弟选择器和通用后面兄弟选择器首先，很多资料上把它...

SexySix 2019-08-01 18:42 评论0 收藏0
20W字囊括上百个前端面试题的项目开源了

摘要：字囊括上百个前端面试题的项目开源了这个项目是什么项目内容这个项目目前在上刚刚开源主要内容如下前端面试题主要整理了高频且有一定难度的前端面试题对这些面试题进行解读前端原理详解针对一些有一定难度面试题涉及的知识点进行详解比如涉及的编译原理响应式 20W字囊括上百个前端面试题的项目开源了这个项目是什么? 项目内容这个项目目前在GitHub上刚刚开源,主要内容如下: 前端面试题: 主要整...

Euphoria 2019-08-26 10:49 评论0 收藏0
运维定位服务故障时，前5分钟都在忙啥？

摘要：我们基本上都会从以下步骤入手，这些也是绝大多数运维工程师在定位故障时前几分钟的主要排查点一尽可能搞清楚问题的前因后果不要一下子就扎到服务器前面，你需要先搞明白对这台服务器有多少已知的情况，还有故障的具体情况。遇到服务器故障，问题出现的原因很少可以一下就想到。我们基本上都会从以下步骤入手，这些也是绝大多数运维工程师在定位故障时前几分钟的主要排查点：一、尽可能搞清楚问题的前因后果不要一下子就扎...

tainzhi 2019-04-25 17:22 评论0 收藏0
flex布局的元素如何分配容器的剩余空间

摘要：三个元素会从左往右占据父元素的空间这很显然。左右侧边栏的宽度都是，中间元素的宽度将会占据元素的剩余宽度。同样会导致父元素有部分剩余空间没有分配。自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技...

ethernet 2019-08-30 15:44 评论0 收藏0
Quantum CSS，一个超快的CSS引擎

摘要：既然出现了，那怎么办，目前并没听说出现什么新的技术替代它虽然它真的已经很不适合现代的前端了，那么只能开发一个新的引擎提高性能，这就是火狐家的量子引擎又叫。这就是所谓的，火狐前一个引擎所做的那样。开始本文翻译自Inside a super fast CSS engine: Quantum CSS ，如果想要阅读原文，可以点击前往，以下内容夹杂本人一些思考，翻译也并不一定完全。碎碎念...

jerryloveemily 2019-08-22 11:06 评论0 收藏0