主题

CSS 选择器 ​

基本选择器 ​

  • 类选择器 .class
  • id 选择器 #id
  • 标签选择器 div
  • 通配符 *

关系选择器 ​

  • 并集选择器 div, p, ul, li
  • 后代选择器 ul li
    选择<ul>元素内的所有<li>元素
    html
    <ul>
  <li>
    这个li会被选中
    <ol>
      <li>这个li会被选中</li>
    </ol>
  </li>
  <li>这个li会被选中</li>
  <li>这个li会被选中</li>
</ul>

子代选择器 > ​

ul > li 选择在<ul>元素内的第一层<li>元素

html
<ul>
  <li>
    这个li会被选中
    <ol>
      <li>这个li不会被选中</li>
    </ol>
  </li>
  <li>这个li会被选中</li>
  <li>这个li会被选中</li>
</ul>

相邻兄弟选择器 + ​

div + p 选择紧接在<div>后面第一个<p>元素

html
<div>div</div>
<p>第一个p会被选中</p>
<p>第二个p不会被选中</p>

一般兄弟选择器 ~ ​

div ~ p 选择与<div>同父元素的且在<div>元素之后的所有兄弟<p>元素

html
<p>在div上面的p不会被选中</p>
<div>
  <p>div里面的p不会被选中</p>
</div>
<p>第一个p会被选中</p>
<p>第二个p会被选中</p>

属性选择器 ​

[id] ​

div[id] 选择带有id属性的所有<div>元素

html
<div id="box">会被选中</div>
<div id>会被选中</div>
<div>不会被选中</div>

[target="_blank"] ​

a[target="_blank"] 选择target=_blank的所有<a>元素

html
<a href="#" target="_blank">会被选中</a>
<a href="#" target>不会被选中</a>
<a href="#">不会被选中</a>

[class|=box] ​

div[class|=box] 选择class值为box的或者以box-开头的所有<div>元素

html
<div class="box">会被选中</div>
<div class="box-one">会被选中</div>
<div class="boxtwo">不会被选中</div>
<div class="three-box">不会被选中</div>
<div class="four box">不会被选中</div>

[title~="hello"] ​

div[title~="hello"] 选择title="hello"或者是包含hello完整单词的所有<div>元素

html
<div title="hello">会被选中</div>
<div title="one hello">会被选中</div>
<div title="hellotwo">不会被选中</div>
<div title="three-hello">不会被选中</div>

[href^="http"] ​

a[href^="http"] 选择href值以http开头的所有的<a>元素

html
<a href="http://www.">会被选中</a>
<a href="#http://www.">不会被选中</a>
<a href="www.">不会被选中</a>

[scr$=".png"] ​

img[scr$=".png"] 选择src值以.png结尾的所有<img>元素

html
<img src="01.png" alt="会被选中">
<img src="01.jpg" alt="不会被选中">
<img src="01.pngj" alt="不会被选中">

[class*="text"] ​

p[class*="text"] 选择class值中包含text的所有<p>元素

html
<div class="text">会被选中</div>
<div class="one-text">会被选中</div>
<div class="two text">会被选中</div>
<div class="tthreeext">不会被选中</div>

伪类选择器 ​

选择该父元素内的元素

:first-child ​

h1:first-child 选择h1的父元素下的第一个标签，并且是<h1>

html
<div>
  <h1>会被选中</h1>
  <h1>不会被选中</h1>
  <div>
    <h1>会被选中</h1>
    <h1>不会被选中</h1>
  </div>
  <div>
    <h3>不会被选中</h3>
    <h1>不会被选中</h1>
  </div>
</div>

:last-child ​

h1:last-child 选择h1的父元素下的最后一个标签，并且是<h1>

html
<div>
  <h1>不会被选中</h1>
  <h1>不会被选中</h1>
  <div>
    <h1>不会被选中</h1>
    <h1>会被选中</h1>
  </div>
  <div>
    <h3>不会被选中</h3>
    <h1>会被选中</h1>
  </div>
</div>

:first-of-type ​

h3:first-of-type 选择h3父元素下第一个出现的<h3>

html
<div>
  <h3>会被选中</h3>
  <h3>不会被选中</h3>
  <h1>不会被选中</h1>
  <div>
    <h1>不会被选中</h1>
    <h3>会被选中</h3>
    <h1>不会被选中</h1>
  </div>
</div>

:last-of-type ​

h3:last-of-type 选择h3父元素下最后一个出现的<h3>

html
<div>
  <h3>不会被选中</h3>
  <h3>会被选中</h3>
  <h1>不会被选中</h1>
  <div>
    <h1>不会被选中</h1>
    <h3>会被选中</h3>
    <h1>不会被选中</h1>
  </div>
</div>

:only-of-type ​

h3:only-of-type 选择h3父元素下仅仅只有一个<h3>元素（可以含有其他标签）

html
<div>
  <h3>不会被选中</h3>
  <h3>不会被选中</h3>
  <h1>不会被选中</h1>
  <div>
    <h1>不会被选中</h1>
    <h3>会被选中</h3>
    <h1>不会被选中</h1>
  </div>
</div>

:only-child ​

h3:only-child 选择没有兄弟元素的<h3>元素

html
<div>
  <h3>不会被选中</h3>
  <h3>不会被选中</h3>
  <h1>不会被选中</h1>
  <div>
    <h1>不会被选中</h1>
    <h3>不会被选中</h3>
  </div>
  <div>
    <h3>会被选中</h3>
  </div>
</div>

:nth-child(n) ​

p:nth-child(3)选择p父元素下第三个元素是<p>
参数支持：an+b 形式 即2n+1
其中a可正可负 b必须为正
当a为负时，-n+3 选择倒数三个
下例：p:nth-child(2n+1)

html
<div>
  <p>会被选中</p>
  <p>不会被选中</p>
  <p>会被选中</p>
  <p>不会被选中</p>
  <p>会被选中</p>
  <p>不会被选中</p>
  <p>会被选中</p>
</div>

:nth-last-child(n) ​

p:nth-last-child(3) 选择p父元素下倒数第三个是<p>

html
<div>
  <p>不会被选中</p>
  <p>不会被选中</p>
  <p>不会被选中</p>
  <p>会被选中</p>
  <div>
    <p>会被选中</p>
    <p>不会被选中</p>
    <p>不会被选中</p>
  </div>
  <div>
    <div>不会被选中</div>
    <p>不会被选中</p>
    <p>不会被选中</p>
  </div>
</div>

:nth-of-type(n) ​

p:nth-of-type(3) 选择p父元素下第三个<p>

html
<div>
  <div>不会被选中</div>
  <p>不会被选中</p>
  <p>不会被选中</p>
  <p>会被选中</p>
  <div>
    <p>不会被选中</p>
    <p>不会被选中</p>
    <p>会被选中</p>
  </div>
  <div>
    <p>不会被选中</p>
    <div>不会被选中</div>
    <p>不会被选中</p>
    <p>会被选中</p>
  </div>
</div>

:nth-last-of-type(n) ​

p:nth-last-of-type(3) 选择p父元素下倒数第三个<p>

html
<div>
  <div>不会被选中</div>
  <p>会被选中</p>
  <p>不会被选中</p>
  <p>不会被选中</p>
  <div>
    <p>会被选中</p>
    <p>不会被选中</p>
    <p>不会被选中</p>
  </div>
  <div>
    <p>会被选中</p>
    <div>不会被选中</div>
    <p>不会被选中</p>
    <p>不会被选中</p>
  </div>
</div>
  • a:link 未被访问的a链接
  • a:visited 已被访问的a链接
  • a:active a链接被激活状态
  • a:hover 鼠标经过a链接
  • input:focus 选择获取焦点的<input>元素
  • :root 选择文档根元素即<html>元素
  • div:empty 选择空的div元素（也不可以有文本）
  • p:target 选择当前活动的<p>元素 (一般用于锚链接)
  • input:enabled 选择激活的<input>元素
  • input:disabled 选择禁用的<input>元素
  • :not(p) 选择非p的元素 (p要设置相应的样式，否则也会调用:not(p)里的样式)

伪元素选择器 ​

  • p::first-letter
    选择所有<p>元素的第一个字符
  • p::first-line
    选择所有<p>元素的第一行字符
  • div::before
    在每个div之前插入的内容content及样式
  • div::after
    在每个div之后插入的内容content及样式
  • p::selection
    选择所有<p>元素被用户选取的内容样式
    只能设置color、background、cursor 以及 outline

终身成长

Copyright © 2025 PaddyWang