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

Irene1991

已于 2023-08-14 00:32:18 修改

阅读量387

点赞数

分类专栏：学习笔记文章标签： css选择器前端开发

于 2023-08-14 00:14:46 首次发布

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/irene1991/article/details/132267553

版权

学习笔记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

前言

主要内容来自菜鸟教程

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>