CSS常见的选择器有哪些？

简单选择器(根据标签名称,id,类选取元素)

• * 通用选择器,页面类所有元素
• .class 类选择器,具有类名class的元素
• #id id选择器,id名为id的元素
• E 标签选择器,标签名为E的元素

组合器选择器(根据特定关系选取元素)

• 后代选择器(空格)
• 子选择器(>)
• 相邻兄弟选择器(+)
• 通用兄弟选择器(~)

伪类选择器(根据特定状态选取元素)

• a:link匹配所有未被点击的链接
• a:visited匹配所有已被点击的链接
• a:hover匹配鼠标悬停其上的a元素
• a:active匹配鼠标已经其上按下、还没有释放的a元素
• li:first-child匹配父元素的第一个子元素li
• li:last-child匹配父元素的最后一个子元素li
• li:nth-child(n)匹配父元素的第n个子元素li（odd奇数，even偶数）

注意:a:hover必须在a:link和a:visited之后才能生效;a:active必须在a:hover之后才能生效

伪元素选择器(选取元素的一部分设置其样式)

• E::before:在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面
• E::after:在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面
• E::selection:应用于文档中被用户高亮的部分（比如使用鼠标选中的部分）
• E::first-letter:匹配E元素的第一个字母第一行的第一个字母
• E::first-line:匹配E元素的第一行

属性选择器(根据属性或属性值选择元素)

 

[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]	[lang|=en]	选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。