CSS选择器
一常用选择器
通用选择器:“*”
元素选择器
id选择器:前面有一个 # 号
类选择器:前面加符号 .
给一个元素加上多个类名
指定某一特定的类
1属性选择器
E[att] :选择具有att属性的E元素。需要选择有某个属性的元 素,而不论属性值是什么,可以使用简单属性选择器。
可以根据多个属性进行选择,只需将属性选择器链接在一起
即可。 E[att="val"]:选择具有att属性且属性值等于val的
E 元素。进一步缩小选择范围,(只选择有特定属性值的
元素。)
E[att~="val"]:选择具有att属性且属性值有多个,其中一个的 值等于val的E元素。
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
2关系选择器
后代选择器(包含选择器)ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围
相邻选择符:E+F:选择紧贴在E元素之后F元素。
兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)
3伪元素选择器
E:first-letter/E::first-letter 设置元素内的第一个字符的样式。
E:first-line/E::first-line设置元素内的第一行的样式。
E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用
E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用
E::selection设置对象被选择时的颜色。
4伪类选择器结构伪类选择器
E:first-child 父元素的第一个子元素E。
:root:选择文档的根元素。
E:last-child:最后一个子元素E。
E:only-child:仅有的一个子元素E。
E:only-of-type:只有一种类型的子元素。
E:nth-child(n):元素的第n个子元素E。
可以直接用数值:比如2
可以用奇数(odd)偶数(even)
可以用公式3n
E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
E:first-of-type :匹配同类型中的第一个同级元素E。
E:last-of-type:匹配同类型中的最后一个同级元素E。
E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
E:empty :匹配没有任何子元素(包括text节点)的元素E。
5UI伪类及其他选择器
E:active 向被激活的元素添加样式。
E:hover 当鼠标悬浮在元素上方时,向元素添加样式。
E:link 向未被访问的链接添加样式
E:visited 向已被访问的链接添加样式。
E:focus 向拥有键盘输入焦点的元素添加样式。
E:lang向带有指定 lang 属性的元素添加样式。
input:checked 选择每个被选中的input元素。
input:disabled 选择每个禁用的input元素
input:enabled 选择每个启用的input元素。
input:disabled 选择每个禁用的input元素
E:target 选择当前活动的元素(某个被链接的元素)。
:not(E) 选择E元素之外的每个元素。