关于css选择器的总结

关于css选择器的总结

css选择器大体上可以分为三种分别是：简单选择器、属性选择器还有伪类选择器。

（一）简单选择器中可以通过三种分类：id、class、type，这三种选择器分别是按重要性递减来排序，id选择器可以视为身份证，class和type都可以当成分类，这就说明id可以当成唯一标识符，id用#来开始展示样式表。

在相同的分量时：在相同规则时，后加载的会覆盖先加载的规则
。

（二）属性选择器是指根据元素属性的取值来进行属性选择，以下是几个常见的语法和相应的使用说明

1. 基本语法

2.1.1E [ attr ] { sRules }

2.1.2E [ attr = value ] { sRules }

2.1.3E [ attr ~= value ] { sRules }

2.1.4E [ attr |= value ] { sRules }

2.1.5E [ attr $= value ] { sRules }

2. 使用说明

2.2.1选择具有 attr 属性的 E

2.2.2选择具有 attr 属性且属性值等于 value 的 E

2.2.3选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格

2.2.4选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

2.2.5选择具有 attr 属性且属性值为va

lue结尾的元素
（三）伪类选择器包含：UI元素状态伪类、结构性伪类和目标伪类还有否定伪类
UI元素状态伪类：

E:checked ： {attribute}是指匹配所有用户界面（form表单）中处于选中状态的元素E

E:enabled ： {attribute}是指匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled ： {attribute}是指匹配所有用户界面（form表单）中处于不可用状态的E元素

E::selection ： {attribute}是指匹配E元素中被用户选中或处于高亮状态的部分

结构性伪类：（由于结构性伪类比较多，这里只是描写其中比较常见的）

E:last-child ： {attribute}是指匹配父元素中最后一个E元素（同理first-child）

E:nth-child(n) ： {attribute}是指匹配父元素中的第n个子元素E

E:empty ： {attribute}是指匹配没有任何子元素（包括text节点）的元素E

E:root ： {attribute}是指匹配文档的根元素。在HTML中，根元素永远是HTML

注：由于是刚开始学习，哪里写的不好或者写错了，还请各位看官老爷多多包涵，能提点斧正我的错误。