CSS选择器分类梳理并高亮重点_css 当前流程高亮显示-优快云博客

错误纠正或者说更为严谨的写法

css选择器表格中，关于伪类和伪元素使用单双引号的纠正。

css伪类和伪元素的区别

前言

主要内容来自菜鸟教程

CSS 选择器 | 菜鸟教程

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

css选择器

关于伪类和伪元素使用单双引号的纠正太多了，表格就不一一修改了，使用的时候注意就行。

选择器	CSS	示例	示例说明
基础
*	2	*	选择所有元素
:root	3	:root	选择文档的根元素
element	1	p	选择所有<p>元素
:not(selector)	3	:not(p)	选择所有并非p元素的元素
element,element	1	div,p	选择所有<div>元素和 <p> 元素
#id	1	#firstname	选择所有id="firstname"的元素
.class	1	.intro	选择所有class="intro"的元素
element.class	1	p.hometown	选择所有 class="hometown" 的 <p> 元素
位置关系
element element	1	div p	选择<div>元素内的所有<p>元素
element>element	2	div>p	选择所有父级是 <div> 元素的 <p> 元素
element1~element2	3	p~ul	选择p元素之后的所有ul元素
element+element	2	div+p	选择所有 <div> 元素之后紧跟的第一个 <p> 元素
:first-letter	1	p:first-letter	选择所有<p>元素的第一个字母
:first-line	1	p:first-line	选择所有<p>元素的第一行
:before	2	p:before	在所有<p>元素之前插入内容
:after	2	p:after	在所有<p>元素之后插入内容
包含关系
: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"的<p>元素
[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	选择输入值非法的元素测试代码

测试代码

<!DOCTYPE >
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>测试css</title>
    <style>
      div {
        width: 400px;
        min-height: 100px;
        border: 1px solid #999;
      }
      div + p {
        color: red;
      }
      p.testp::first-letter {
        color: blue;
        font-weight: bold;
        font-size: 2rem;
      }
      p.testp::first-line {
        background-color: #ccc;
      }
      p:first-of-type {
        font-size: 2rem;
      }
      p:empty {
        width: 200px;
        height: 36px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="test1">测试div1</div>
    <div>
      <p>测试p，文档中第一个p</p>
      <p>测试p，文档中第二个p</p>
    </div>
    <p>测试p1</p>
    <div class="test2">测试div2</div>
    <p>测试p2</p>
    <div class="test3">测试div3</div>
    <p>测试p3</p>
    <hr />
    <p class="testp">
      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.
    </p>
    <p></p>
    <script></script>
  </body>
</html>

测试包含关系选择器

页面效果

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        border: 1px solid yellowgreen;
        margin: 20px;
        padding: 20px;
      }
      /* 没有指定父级 */
      p:first-of-type {
        color: red;
      }
      /* 指定父级为div.testP */
      div.testP > p:first-of-type {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <article>html元素层层嵌套，父子关系都是相对的。</article>
      <div class="testP">
        testP
        <div>
          testP的子代div
          <p>testP的后代p</p>
        </div>
        <p>testP的子代p</p>
      </div>
    </div>
  </body>
</html>