属性选择器

·!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{

内容样式} //h1与p同级

·兄弟选择器（E~F）：选择E元素所有兄弟元素F；h2~p{

……} //h2与p同级且选择的元素不包含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选择器 < 行内样式