CSS3选择器

选择器的优先级：!important  > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 * > 继承 > 浏览器默认属性同一级别。

一、基本选择器

（1）* ：通用元素选择器，匹配任何元素。

（2）E：标签选择器，匹配所有E标签的元素。

（3）.info , E.info：Class选择器。

（4）#info：ID选择器。

二、组合选择器

（1）E,F：分组选择器（并集选择器），同时匹配所有E,F元素。

（2）E F：后代元素选择器，“ ”（空格）组合器选择前一个元素的后代节点，匹配所有属于E元素的后代元素的F元素。

（3）E>F：直接子代选择器，匹配所有属于E元素的子元素的F元素。

（4）E+F：毗邻元素选择器，匹配所有紧随E元素之后的同级元素F。

（5）E~F：兄弟选择器，后一个节点在前一个节点后面的任意位置，即E为兄，F为弟，匹配任何在E元素之后的同级F。

三、属性选择器

（1）E[att]：匹配所有具有att属性的E元素，不考虑它的值（注：E在此处可以省略）。

 

/* 存在 title 属性的<a> 元素 */
a[title] {
  color: purple;
}

 

（2）E[att=val]：匹配所有att属性等于val的E元素。

/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

  

（3）E[arr~=val]：匹配所有att属性具有多个空格分隔的值、其中一个值等于val的E元素。

/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

 

（4）E[att|=val]：匹配所有att属性具有多个连字号分隔的值、其中一个值等于val的E元素，主要用于lang属性，如 p[lang|=en]{ color:#fff;}。（上面是CSS 2.1的，下面是CSS3）

（5）E[att^='val']：属性att的值以val开头的元素，如 div[id^='nav']{color:#000;}。

（6）E[att$='val']：属性att的值以val结尾的元素。

（8）E[att*='val']：属性att的值包含val的元素。

四、伪类选择器(很多，只列出常用的；一般作用在整个元素）

（1）E:first-child：匹配父元素的第1个子元素。

（2）E:nth-child(n)：匹配父元素的第n个子元素E。

（3）E:link：匹配所有未被单击的链接。

（4）E:visited：匹配所有已单击的链接。

（5）E:active：匹配鼠标已经在其上按下、还没有释放的E元素。

（6）E:hover：匹配鼠标悬停其上的E元素。

（7）E:focus：匹配获得当前焦点的E元素。

五、伪元素选择器（一般作用在元素的内容上）

（1）E:first-line：匹配E元素的第1行。

（2）E:first-letter：匹配E元素的第1个字母。

（3）E:before：在E元素之前插入生成的内容。

（4）E:after：在E元素之后插入生成的内容。

六、用户界面伪类选择器

（1）E:checked：匹配表单中被选中的radio或checkbox元素。

（2）E:enabled：匹配表单中激活的元素。

（3）E:disabled：匹配表单中禁用的元素。

（4）E::selection：匹配用户当前选中的元素。

七、结构性伪类选择器

（1）E:nth-child(n)：匹配父元素的第n个子元素E。

（2）E:empty：匹配一个不包含任何子元素的元素。注意，文本节点也被看做子元素。

（3）E:only-child：匹配父元素下仅有的一个子元素。

（4）E:not(s)：匹配不符合当前选择器的任何元素。如:not(p){border:1px solid #ccc;}

（5）E:target：匹配文档中特定'id'单击后的效果。