CSS 选择器

index.html 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>示例页面</title>
  </head>
  <body>
    <header class="header" id="main-header">
      <h1 class="title">欢迎来到我的网站</h1>
      <nav class="navigation">
        <ul class="nav-list list">
          <li class="nav-item gift"><a href="#random" class="nav-link">首页</a></li>
          <li class="nav-item tool"><a href="#payment" class="nav-link">关于</a></li>
          <li class="nav-item special"><a href="#cat" class="nav-link">联系</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="main-content">
      <article class="article">
        <h2 class="article-title">文章标题</h2>
        <p class="paragraph">
          这是一段<span class="highlight">重要的</span>文字内容，
          包含了<em class="emphasis">强调</em>和<strong class="bold">粗体</strong>元素。
        </p>
        <div class="container">
          <div class="box gift" 作用="礼物">盒子1</div>
          <div class="box tool" 所用="工具">盒子2</div>
          <div class="box special">特殊盒子</div>
        </div>
      </article>
      
      <aside class="sidebar">
        <div class="widget">
          <h3 class="widget-title">侧边栏</h3>
          <p class="widget-content">侧边栏内容</p>
        </div>
      </aside>
    </main>
    
    <footer class="footer">
      <p class="copyright">© 2024 我的网站</p>
    </footer>
  </body>
</html>

选择器输入

匹配数量: 0 选择器类型: -
没有找到匹配的元素

选择器说明

通用选择器: *

元素选择器: h1 | p | div

类选择器: .title | .paragraph

ID选择器: #main-header

后代选择器: div p | article h2

子元素选择器: div > p

接续兄弟选择器: div + p

后续兄弟选择器: div ~ p

伪类选择器: :first-child | :hover

函数式伪类选择器: :where() | :has() | :not()

伪元素选择器: ::before | ::after

属性选择器: [type="text"] | [class*="btn"]

交集选择器: div.box | .highlight#code

并集选择器: h1, .test, #count