CSS3新增选择器总结

属性选择器

·!important 强制优先,在CSS中添加。

·input[value][style]{样式内容}

·input[value=vip1]{样式内容}

·input[style~=15px]{……} //标签中含有style=”font-size:15px”;

·p[lang=’en’]{……} //其他语言

·input[value^=vip]{……} //value中的值以vip开头

·input[value*=vip]{……} //value中含有vip

·a[href^=http]{……} //a中值以http开头

·a[href$=.cn]{……} //a中以 .cn结尾

关系选择器

·ul  li:后代选择器(包含选择器);当中添加样式后,其中所有内容都会添加样式。

·ul > li:子选择器;ul中的li会有样式,若li中还有其他标签,则其他标签不受影响。

·相邻选择器(E+F):h1+p{内容样式} //h1p同级

·兄弟选择器(E~F):选择E元素所有兄弟元素Fh2~p{……} //h2p同级且选择的元素不包含h2

伪元素选择器

·E:first-letter/E::first-letter:设置元素内第一个字符样式。 //p:::first-letter{……}

·E:first-line/E::first-line设置元素内第一行字符样式。 //p:::first-line{……}

·E:before/E::before每个E元素内容之前插入内容,用来和content属性一起使用。 //a::before{content:”点击”}

·E:after/E::after每个E元素内容之后插入内容,用来和content属性一起使用。 //a::after{content:url(路径)}

·E::selection设置对象被选中时的颜色。 //p::selection{backgroun:red}

结构伪类选择器

· :root 选择文档的根元素。 //:root{……}

·E:first-child父元素的第一个子元素E //p:first-child{……}

·E:last-child父元素的最后一个子元素E //p:last-child{……}

·E:only-child仅有一个子元素E(的情况下作用)。

·E:only-of-type只有一种类型的子元素。

·E:first-of-type匹配同类型中的第一个同级元素。

·E:last-of-type匹配同类型中的最后一个同级元素。

·E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素。

·E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素。

·E:nth-child(n)E元素的第n个子元素。

·可以直接用数字,如2

·可以用奇数(odd)或偶数(even

·可以用公式

·E:nth-last-child(n):匹配父元素的倒数第n个子元素。

·E:empty匹配没有任何子元素。 //div:empty{……}html中:<div></div>不能有空格)

UI伪类选择器及其他选择器

·E:active 向被激活的元素添加样式。

·E:hover 当鼠标悬浮在元素上方时,向元素添加样式。

·E:link 向未被访问的链接添加样式。

·E:visited 向已被访问的链接添加样式。

·E:focus 向拥有键盘输入焦点的元素添加样式。

·E:lang 向带有指定lang属性的元素添加样式。如:P:lang(en){color:red;}

·input:checked 选择每个被选中的input样式。

·input:disabled 选择每个禁用的input样式。

·input:enabled 选择每个启用的input元素。

·#E:target 选择当前元素的锚点元素。

· :not(E) 选择E元素之外的每个元素。

·补充:选择器优先级:元素选择器 < 类选择器 < ID选择器 < 行内样式

原文地址:https://www.cnblogs.com/wzjie1234/p/10714950.html