CSS选择器学习策略

本文主要介绍CSS中的选择器，包括对顺时针选择器的性能的一些建议，需要的朋友可以参考一下。
CSS选择器的基本知识

1。基本选择器
序列号选择器的含义
1。*通用元素选择器，匹配任何元素
2。e标记选择器，它匹配使用E标记的所有元素
3 ..信息类选择器，匹配包含所有类属性中的元素的元素
4。# footer ID选择器，它匹配所有元素的ID属性等于页脚

实例uff1a
CSS代码将内容复制到剪贴板。
*边距：0；填充：0；}
P {字体大小：2em；}
背景：# ff0。信息{；}
p.info {背景：# ff0；}
p.info.error {颜色：# 900；font-weight: bold；}
#信息{背景：# ff0；}
P #信息{背景：# ff0；}

二元多元组合选择器
序列号选择器的含义
5。E，f多元选择器，匹配所有E或f元素，用逗号分隔。
6。匹配子元素的所有f元素的E f后代元素选择器，由E和f之间的空格分隔
7。e子元素选择器，匹配所有E元素的子元素f
8。e邻近元素选择器，匹配所有E元素之后的同一级元素f

实例uff1a

CSS代码将内容复制到剪贴板。
div p { color: # F00；}
# NAV李{display: inline；}
#净值{ font-weight: bold；}
强{颜色：# F00；}
p p { color: # F00；}

三，CSS 2.1属性选择器
序列号选择器的含义
9。E { ATT }匹配所有E元素与属性的属性，而不考虑它的价值
10。E { ATT =瓦尔}匹配所有ATT属性等于valE元素
11。E { ATT ~ =瓦尔}匹配所有ATT属性与多个空格分隔的值，其中一个是等于valE元素
12。E { ATT | =瓦尔}，所有ATT属性与多个连字符分隔（连字符隔开）值，一个值
With ldquo; val; the beginning of the E element, mainly for Lang attributes, such as ldquo; en; ldquo; en-us; ldquo; en-gb; and so on

实例uff1a
CSS代码将内容复制到剪贴板。
P {标题} {颜色：# F00；}
div { class=错误} {颜色：# F00；}
TD {标题} { ~ = col1颜色：# F00；}
P {郎| = EN } {颜色：# F00；}
引用引用引用} { {类} {颜色：# F00；}
四中的伪类，CSS 2.1
序列号选择器的含义
13。e：第一个子元素匹配父元素的第一个子元素。
14。e：链接匹配所有未单击的链接。
15。e：访问所有单击链接的匹配项
16。e：主动匹配已按下并未从E元素释放的鼠标。
17。e：悬停与鼠标匹配，使E元素悬停在其上。
18。e：焦点匹配获取当前焦点的E元素
19。e：郎（c）匹配与C的E元素相等的朗属性
实例uff1a
CSS代码将内容复制到剪贴板。
p：第一个子{字体样式：斜体；}
Input{type=text}: focus {color:#000; background:#ffe;}
输入{类型=文本}：焦点：悬停{背景：# FFF；}
问：郎（SV）{引用： 201d 201d 2019 2019 ；}
五中的伪元素，CSS 2.1
序列号选择器的含义
20。e：第一线匹配E元素的第一行
21。e：第一个字母匹配E元素的第一个字母。
22。e：在E元素之前插入生成的内容
23。e：在E元素后面插入生成的内容之后

实例uff1a
CSS代码将内容复制到剪贴板。
P：一线{ font-weight: bold；颜色；# 600；}
序言：第一个字母{字体大小：1.5em；font-weight: bold；}
。CBB：前{内容：'；显示：块；高度：17px；宽度：18px；背景：URL（顶部。PNG）没有重复00；保证金：0 00 18px；}
一：链接：在{内容：'（attr（href））；}
相同级别元素六的常用选择器，CSS 3
序列号选择器的含义
24。e匹配E元素之后的任何同一水平F元素

示例：序列号选择器的含义
25。E { ATT ^ = val}，从属性ATT与瓦尔价值元素
26。E { ATT = val}与瓦尔属性ATT的结局的价值元素
27。E { ATT = val}的属性在属性包含的元素的val字符串

CSS代码将内容复制到剪贴板。
P ~ UL {背景：# ff0；}

七，CSS 3属性选择器
实例uff1a
C #代码复制内容到剪贴板
div { ID ^ =资产净值} {背景：# ff0；}

与用户界面相关的伪类八，CSS 3
序列号选择器的含义
28。e：启用匹配表单中激活的元素
29。e：残疾人与表单中的禁用元素匹配。
30中选中的单选（单选框）或复选框（复选框）元素。e：检查匹配表单
31。E:：选择与当前用户选择的元素匹配。

实例uff1a
CSS代码将内容复制到剪贴板。
输入{类型=文本}：残疾人{背景：# DDD；}

九中的结构伪类，CSS 3
序列号选择器的含义
32。e：根与文档的根元素匹配，用于HTML文档、HTML元素
33。e：n个子（n）与其父元素的n个子元素匹配，第一个数字是1。
34。e：最后一个子（n）与其父元素的倒数n个子元素匹配，第一个数字是1。
35。E：n类型（n）类似于n个子（），但只匹配使用相同标签的元素。
36。E：n类型（n）的最后一个类似于：n最后一个子元素（），但只匹配使用相同标签的元素。
37。e：最后一个子元素匹配父元素的最后一个子元素，相当于：第n个最后的子元素（1）
38。E：第一类型匹配相同的标签的第一个子元素具有相同的父元素，相当于n型（1）：
39。e：最后一个类型匹配相同标号的最后一个子元素，其父元素等于：n类型的最后一个（1）
40。E：独生子女只匹配一个元素的父元素，在相当于：第一个孩子：最后一个孩子
或：n个子（1）：第n个最后的子（1）
41。e：只有类型匹配在父元素下使用相同标号的唯一子元素，等价于：第一种类型：最后一种类型。
或：类型的n（1）：类型的最后一个（1）
42。E：空匹配一个不包含任何子元素的元素。注意，文本节点也被视为子元素。

实例uff1a
CSS代码将内容复制到剪贴板。
P：nth-child（3）{颜色：# F00；}
P：nth-child（奇数）{颜色：# F00；}
P:nth-child (even) {color:#f00;}
P：nth-child（3n + 0）{颜色：# F00；}
P：nth-child（3N）{颜色：# F00；}
翻译：nth-child（2n + 11）{背景：# ff0；}
翻译：n上的孩子（2）{背景：# ff0；}
P：最后一个孩子{背景：# ff0；}
P：独生子女{背景：# ff0；}
P：空{背景：# ff0；}
反选择伪类十和CSS 3
序列号选择器的含义
43。e：（s）不匹配不符合当前选择器的任何元素

实例uff1a

CSS代码将内容复制到剪贴板。
没有（P）{ border: 1px solid # CCC；}

十一，CSS 3：目标伪类
序列号选择器的含义
44。e：目标匹配文档中特定的id单击的效果。

关于使用选择器的几点建议

CSS选择器是由初始化参数显示页面元素应用CSS规则。作为一个网站前端开发工程师，我们应该避免一些常见的昂贵的CSS选择器模式写作，并尝试编写高效的CSS选择器，以加快渲染速度，缩短页面呈现时间。
Steve Souders，一个高级网站开发工程师在眉目传情，使得对CSS选择器的效率从高到低：

的1.id选择器（# 2个）。（Myclassname）3。类选择器标记（div、H1、p选择器）4。（H1 + p）5。相邻选择器选择器（UL < LI）6。（李A）7。后代选择器通配符选择器（*）8。属性选择器（外部}）9。伪类选择器（a：悬停，即：n个子）

在上述九个选择器中，id选择器的效率最高，而伪类选择器的效率是最底层的。
在上面的命令，我们清楚地知道，id和class选择器名称是最有效的，而CSS3的伪类和属性选择器是易于使用，但效率是最低的。

写基本原理时，写CSS时要注意，下面是几个例子，让你更透彻地理解。
1。写ID规则时不要使用标签或类名。

坏
按钮#返回按钮{ hellip；}
坏
。菜单左# newmenuicon { hellip；}
OD
#返回按钮{ hellip；}
OD
# newmenuicon { hellip；}

因为从右边的选择开始，风格的系统，只要当前选择的左边还有其他选择的风格体系将继续向左移动，直到我们发现和规则匹配的元素，或因为他们不匹配而放弃，所以，在按钮#返回按钮{ hellip；}，先找到ID返回按钮式系统的元素，然后向左，查看元素的标签名称按钮，如果没有，找一个ID为返回按钮元件，然后检查元素的标记名称，如此循环，直到到达文件的结尾。如果只是#返回按钮{ }，然后呢，造型系统发现的元素ID返回按钮，因为它没有在左边其他选择器，它将退出搜索。

此外，根据HTML规范，ID是在HTML中只有一个，就是说一个HTML页面只有一个ID为XX元和id元素有无限的标签名称，所以在按钮#返回按钮{ hellip；}，按钮的标签是完全没有意义的，可以而且应该删除按钮#返回按钮{ hellip和#返回按钮{ hellip；}；}是等效的。在#返回按钮只会导致风格的系统移动到左写更多的按钮，继续寻找网页元素，失去页面性能，延长页面的渲染时间。

另一方面，在id元素前面添加一个标签名称，将导致另一个致命的问题，如原来的身份返回按钮的标签名称按钮，如果原来的风格写#按钮返回按钮{ hellip；}，现在需要把按钮标签到输入ID，按钮#返回按钮常数，{ hellip；}样式规则声明的返回按钮的ID不相同的输入元素，不信你可以自己准备尝试。
2。不要在编写类规则时使用标签名称。

坏
treecell.indented { hellip；}
OD
.treecell-indented {hellip;} / / language and tag names tied together assuming treecell
最好的
。层次深{ hellip；} / /语言和标签无关

原则参考是第一位的。
三.使用类规则替换多个标签选择规则，以减少CSS查找

坏
{ mailfolder =真实项目treerow } > >树木细胞{ hellip；}
OD
树木细胞mailfolder { hellip；}。

4。避免使用subselectors

现在让我们看看戴维凯悦第三款一看：后代选择器是CSS中最昂贵的选择。杀也很昂贵；mdash；特别是把它与一个标签或通配符！

坏
treehead treerow树木细胞{ hellip；}
更好，但仍然不好（见下一条准则）
treehead > treerow >树木细胞{ hellip；}

标签后，最好不要添加subselector

坏
treehead > treerow >树木细胞{ hellip；}
OD
树木细胞头{ hellip；}。
坏
项目{ isimapserver =真正的treerow } > >。树folderpane图标{ hellip；}
OD
。树folderpane图标{ isimapserver =真正的} { hellip；}

5。靠继承

坏
# bookmarkmenuitem >。菜单左{列表样式图像：URL（废话）}
OD
# bookmarkmenuitem {列表样式图像：URL（废话）}

最后，我们得出结论：当我们写CSS，我们应优先考虑的类选择器的使用，避免使用通配符选择器（*）和属性选择器（一{ rel=；external}），和后代和标签选择器组合也应避免使用ID选择器。性能是最好的，但应该指出的是，它是独特的，小心使用CSS3选择器（例如：nth-child（n），n的孩子）帮助我们锁定我们想要的元素在保持清洁和语义的标签，但事实是，这些花哨的选择器让更多的浏览器资源密集型的。引用David Hyatt的关于CSS3选择器：如果你关心页面表现，他们不应该被用！