css选择器类型
选择器：用于访问一个或多个元素的方法 （1,2,3数字表示在哪个 CSS 版本中定义的）
1. 基本选择器
- #id ：根据给定的id匹配相应元素 1
- element ：标签选择器 1
- .class ：类选择器 1
- * ：通配符选择器 2
- select1,select2,select3 ： 分组选择器 1
2. 层级选择器
- ancestor descendant ：后代选择器（给定祖先元素下匹配所有的后代元素） 1
- parent > child ：子代选择器 （父元素下匹配所有的子元素） 2
- prev + next ：兄弟选择器（紧接在prev后面的next元素，next元素指的是下一个相邻同辈元素） 2
- prev ~ next ： 匹配prev元素之后的所有同辈元素 2
3. 属性选择器
- [attribute] ： [target] 选择带有 target 属性所有元素。 2
- [attribute=value] ： [target=_blank] 选择 target="_blank" 的所有元素。 2
- [attribute~=value] ： [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
- [attribute|=value] ： [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
- [attribute^=value] ： a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
- [attribute$=value] ： a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
- [attribute*=value] ：a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
4. 基本过滤选择器
- :link ： a:link 选择所有未被访问的链接。 1
- :visited ： a:visited 选择所有已被访问的链接。 1
- :active ： a:active 选择活动链接。 1
- :hover ： a:hover 选择鼠标指针位于其上的链接。 1
- :focus ： input:focus 选择获得焦点的 input 元素。 2
- :first-letter ： p:first-letter 选择每个 <p> 元素的首字母。 1
- :first-line ： p:first-line 选择每个 <p> 元素的首行。 1
- :before ： p:before 在每个 <p> 元素的内容之前插入内容。 2
- :after ： p:after 在每个 <p> 元素的内容之后插入内容。 2
- :lang(language) ： p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
5. 子元素选择器
- :first-child ： p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
- :first-of-type ： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
- :last-of-type ： p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
- :only-of-type ： p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
- :only-child ： p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
- :nth-child(n) ： p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
6. 表单过滤选择器
- :enabled ： input:enabled 选择每个启用的 <input> 元素。 3
- :disabled ： input:disabled 选择每个禁用的 <input> 元素 3
- :checked ： input:checked 选择每个被选中的 <input> 元素。 3
- :not(selector) ： :not(p) 选择非 <p> 元素的每个元素。 3
- ::selection ： ::selection 选择被用户选取的元素部分。 3
7.
- :root ： :root 选择文档的根元素。 3
- :empty ： p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
- :target ： #news:target 选择当前活动的 #news 元素。 3
