GIS君-Manchan's blog GIS君-Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱/GIS君

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
    • CSS选择器的优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
    • 属性选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
    • 树结构伪类
      • :root伪类
      • :empty伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-29
目录

树结构伪类

本章将介绍 DOM 树结构查询伪类,这类伪类虽然名为伪类,但行为上更接近于普通选器。本章中出现的伪类的使用频率可能会有差异,但这些伪类都是很实用的。

# :root伪类

# :root伪类和<html>元素

在XHTML 或者 HTML 页面中,:root 伪类表示的就是<html>元素。

两者间的区别:

  • :root伪类的优先级更高,伪类的优先级比标签选择器的优先级要高一个层次。
  • 对于:root,IE9及以上的浏览器才支持,兼容性要逊于html标签选择器。
  • :root指所有XML格式文档的根元素,XHTML文档只是其中一种。

# :root伪类的应用场景

  1. 滚动条出现页面不跳动

    :root {
        overflow-x: hidden;
    }
    :root body {
        position: absolute;
        width: 100vw;
        overflow: hidden;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8

    直接让居中定位计算宽度一直都不包含滚动条宽度,这样就一定不会发生跳动。

  2. CSS变量 业界约定俗成,CSS变量写在:root伪类中。

    之所以写在:root 伪类中,是因为这样做代码的可读性更好。同样是根元素,html 选择器负责样式,:root 伪类负责变量,这一点是约定俗成的,它们互相分离,各司其职。例如:

    :root {
        /*颜色变量*/
        --blue: #2486ff;
        --red: #f4615c;
        /*尺寸变量*/
        --layerWidth: 1190px;
    }
    html {
        overflow: auto;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

# :empty伪类

  1. :empty伪类用来匹配空标签元素。

    <div class="cs-empty"></div>
    
    1
    .cs-rmpty:empty {
      width: 120px;
      padding: 20px;
      border: 10px dashed;
    }
    
    1
    2
    3
    4
    5

    此时,<div>元素就会匹配:empty伪类,呈现出虚线框。

  2. :empty 伪类还可以匹配前后闭合的替换元素,如<button>元素和<textarea>元素。例如:

    <textarea></textarea>
    
    1
    textarea:empty {
      border: 6px double deepskyblue;
    }
    
    1
    2
    3
  3. :empty 伪类还可以匹配非闭合元素,如<input>元素、<img>元素和<hr>元素等例如:

    但实际开发中很少有需要使用:empty 伪类匹配非闭合元素的场景。

# 对:empty伪类可能的误解

微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/12/01 16:05:30
输入伪类

← 输入伪类

最近更新
01
前端面试学习
01-02
02
Markdown首行缩进
12-01
03
缅怀 | 加强测绘工作 发展地理信息产业
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式