css选择器

115 阅读1分钟

css选择器

  1. 通用选择器
  2. 类选择器
  3. id选择器
  4. 元素选择器
  5. 属性选择器
  6. 兄弟选择器
  7. 后代选择器
  8. 交集选择器
  9. 并集选择器
  10. 伪类选择器
  11. 伪元素选择器

属性选择器

image.png

兄弟选择器

相邻兄弟用+

全部兄弟用~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 相邻用+ */
        .box1+div{
            color: red;
        }
        /* 普遍用~ */
        .box1~div{
            font-size: 98px;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

后代选择器

image.png

交集选择器、并集选择器

image.png

伪类选择器

常见伪类:

image.png

image.png

image.png

伪元素选择器

image.png

image.png

image.png

css选择器 权重

image.png