# 前言 本文章立志于收集各种各样的css类选择器,先根据官方的参考手册,列举出其中的选择器,在以=以后接触到新的性质,或者是跟新出新的选择器,本文章也会做出相应的跟新。
一、常用的scc选择器?
最为基础的选择器:id选择器,类名选择器,标签选择器,*选择器。
选择器的权重排序:
id>class(属性选择器)>element(伪元素选择器)>星号(选择所有)
css选择器列举:
注意后代元素,子元素,父元素,父辈元素的区别
css选择器 | 效果 |
---|---|
.class1.class2 | 选中同时拥有class1和class2的元素 |
.class1 .class2 | 选中class1样式后代元素的所有class2样式 |
element.class | 选中class样式后代元素的所有element标签 |
element,element | 同时选中两个标签元素 |
element1 element2 | 选中标签1后代元素下的所有标签2 |
element1>element2 | 选中所有父元素是element1的element2 |
element1+element2 | 选中element1元素下的第一个标签未element2的子元素 |
element1~element2 | 选中所有element1元素下所有的标签为element2的子元素 |
[attribute] | 选中带有attribute属性的[attribute]元素 |
[attribute=value] | 选中带有attribute属性且属性值为value的所有元素 |
[attribute~=value] | 选中带有attribute属性且属性值包含"value" 的所有元素 |
[attribute|=value] | 选中带有attribute属性且属性值以"value" 开头的所有元素 |
[attribute^=value] | 选中带有attribute属性且属性值以"value"开头的所有元素 |
[attribute$=value] | 选中带有attribute属性且属性值以"value"结尾的所有元素 |
[attribute*=value] | 选中带有attribute属性且属性值包含"value"子串的所有元素 |
[attribute*=value] | 选中带有attribute属性且属性值包含"value"子串的所有元素 |
:active | 选中活动元素 |
:link | 选中未访过的元素 |
::after | 在元素之后插入内容 |
::before | 在元素之前插入内容 |
:checked | 选中默认元素 |
:disabled | 选中禁用状态的元素 |
:enabled | 选中启用的元素 |
:empty | 选中没有子元素的元素 |
:first-child | 选中自己是父元素第一个子元素的元素 |
::first-letter | 选中元素的首字母(p元素) |
::first-line | 选中元素的首行 |
:first-of-type | 选中自己是父元素首个该类型子元素的元素 |
:focus | 选中获得焦点的元素 |
:fullscreen | 选中处于全屏模式的元素 |
:hover | 选中指针位于其上的元素 |
:in-range | 选中值在一定范围内的input元素 |
:indeterminate | 选中处于不确定状态下的元素 |
:invalid | 选中具有无效值的input元素 |
:lang(language) | 选中lang属性为language的元素,languange是语言,有专门的代号指代 |
:last-child | 选中父元素最后一个子元素(选择器前的标签规范的是被选中的元素,而不是其他元素) |
:last-of-type | 选中父元素最后一个指定类型的元素 |
:not(selector) | 不是该选择器选中的所有元素(非 逻辑) |
:nth-child(n) | 选中父元素的第n个子元素 |
:nth-last-child(n) | 选择父元素的最后第n个子元素(逆向计数) |
:nth-of-type(n) | 根据上方理解 |
:nth-last-of-type(n) | 根据上方理解 |
:only-of-type | 选中其父元素的唯一类该元素的所有该元素 |
:only-child | 选中其父元素的唯一一个该元素 |
:optional | 选中不带‘required元素的input元素’ |
:out-of-range | 选中超出指定范围的元素 |
::placeholder | 选中给出placeholder属性的input元素 |
:read-only | 选中具有只读属性的元素 |
:read-write | 选中不具有只读属性的元素 |
:required | 选中具有required属性的元素 |
:root | 选中文档的根元素 |
::selection | 选中用户已选用的元素 |
:target | 选中当前活动的元素 |
:valid | 选中带有有效值的input元素 |
:visited | 选中已访问的元素 |
二、伪元素以及伪类?
css中添加伪元素以及伪类是为了格式化文档以外的内容,这些元素不在文档数中。
伪类:元素在不同状态下的为其设定不同的样式。 修饰那些存在在DOM树中的元素,但是其所处于的状态不存在于DOM树中。
伪元素:在存在在DOM树中的元素前后添加一些元素,为其添加样式。虽然这些元素在页面上可以看到,但是其并不存在于DOM树中。
注意:
:link,:visited,:hover,:active等这些伪元素在IE6中只支持在a标签后使用
:active:点击链接时,链接成为活动的.
:link未被访问页面的链接.
:visited:已访问页面的链接.
:hover :鼠标指针浮动到链接.
:default:只能作用于表单上,选中默认状态的表单元素
:has :满足一定条件后,匹配该元素前位元素,例如:content:has(> img),匹配到的是content
first-of-type和first-child的区别:
前者是首个该类型的子元素,后者是第一个子元素且满足于前面的标签。