CSS选择器分类梳理并高亮重点

前言

主要内容来自菜鸟教程

CSS 选择器 | 菜鸟教程

分类是我自己理解的分类，示例说明优化统一了表述风格。

正文

选择器	CSS	示例	示例说明
基础
*	2	*	选择所有元素
:root	3	:root	选择文档的根元素
element	1	p	选择所有 元素
:not(selector)	3	:not(p)	选择所有并非p元素的元素
element,element	1	div,p	选择所有 元素和 元素
#id	1	#firstname	选择所有id="firstname"的元素
.class	1	.intro	选择所有class="intro"的元素
element.class	1	p.hometown	选择所有 class="hometown" 的 元素
位置关系
element element	1	div p	选择 元素内的所有 元素
element>element	2	div>p	选择所有父级是 元素的 元素
element1~element2	3	p~ul	选择p元素之后的所有ul元素
element+element	2	div+p	选择所有   元素之后紧跟的第一个  元素
:first-letter	1	p:first-letter	选择所有 元素的第一个字母
:first-line	1	p:first-line	选择所有 元素的第一行
:before	2	p:before	在所有 元素之前插入内容
:after	2	p:after	在所有 元素之后插入内容
包含关系
:first-of-type	3	p:first-of-type	选择是其父级第一个p元素的所有p元素
:nth-of-type(n)	3	p:nth-of-type(2)	选择是其父级第二个p元素的所有p元素
:last-of-type	3	p:last-of-type	选择是其父级最后一个p元素的所有p元素
:nth-last-of-type(n)	3	p:nth-last-of-type(2)	选择是其父级倒数第二个p元素的所有p元素
:only-of-type	3	p:only-of-type	选择是其父级唯一p元素的所有p元素
:empty	3	p:empty	选择没有任何子级的所有p元素（包括文本节点）
父子关系
:first-child	2	p:first-child	选择是其父级第一个子级的所有p元素
:nth-child(n)	3	p:nth-child(2)	选择是其父级第二个子元素的所有p元素
:last-child	3	p:last-child	选择是其父级最后一个子级的所有p元素
:nth-last-child(n)	3	p:nth-last-child(2)	选择是其父级倒数第二个子级的所有p元素
:only-child	3	p:only-child	选择是其父级唯一子级的所有p元素
属性
[attribute]	2	[target]	选择所有设置target属性元素
[attribute=value]	2	[target=-blank]	选择所有target属性等于="-blank"的元素
:lang(language)	2	p:lang(it)	选择所有lang属性的起始值="it"的 元素
[attribute|=language]	2	[lang|=en]	选择所有lang 属性等于 en，或者以 en- 为开头的元素
[attribute^=value]	3	a[src^="https"]	选择所有src属性的值以"https"开头的元素
[attribute$=value]	3	a[src$=".pdf"]	选择所有src属性的值以".pdf"结尾的元素
[attribute*=value]	3	a[src*="runoob"]	选择所有src属性的值包含子字符串"runoob"的元素
[attribute~=value]	2	[title~=flower]	选择所有title属性包含单词"flower"的元素
链接状态
:link	1	a:link	选择所有未访问链接
:visited	1	a:visited	选择所有访问过的链接
:active	1	a:active	选择活动链接
:hover	1	a:hover	选择鼠标在链接上面时
:target	3	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
表单状态
:focus	2	input:focus	选择获取焦点的input元素
:enabled	3	input:enabled	选择所有已启用的输入元素
:disabled	3	input:disabled	选择所有禁用的输入元素
:checked	3	input:checked	选择所有选中的输入元素
::selection	3	::selection	选择被用户选中或处于高亮状态的部分
表单属性
:out-of-range	3	:out-of-range	选择值在指定区间之外的input元素
:in-range	3	:in-range	选择值在指定区间之内的input元素
:read-write	3	:read-write	选择可读及可写的元素
:read-only	3	:read-only	选择设置 "readonly"（只读） 属性的元素
:optional	3	:optional	选择可选的输入元素
:required	3	:required	选择设置 "required" 属性的元素
:valid	3	:valid	选择输入值合法的元素
:invalid	3	:invalid	选择输入值非法的元素测试代码

测试代码

  
    
    
    
    
  
  
    
测试div1
    

      
测试p，文档中第一个p
      
测试p，文档中第二个p
    
    
测试p1
    
测试div2
    
测试p2
    
测试div3
    
测试p3
    

    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, id
      provident! Ex eum harum recusandae, ab ut, enim odit necessitatibus
      impedit eligendi soluta, magnam eveniet perferendis a nihil hic minima.