Codes►前端

CSS 选择器

CSS选择器

CSS选择器

CSS选择器是用于选择页面上的元素，以便为其应用样式的一种语法。以下是常见的CSS选择器类型：

基本选择器

  • 元素选择器
    • 定义：通过元素的标签名来选择元素。
    • 示例：p {color: red;}，会选择页面上所有的<p>元素，并将其字体颜色设置为红色。
  • 类选择器
    • 定义：通过元素的class属性来选择元素。在CSS中，类选择器以点（.）开头。
    • 示例：.box {background-color: blue;}，会选择页面上所有class属性值为“box”的元素，如<div class="box"></div>，并将其背景颜色设置为蓝色。
  • ID选择器
    • 定义：通过元素的id属性来选择元素。在CSS中，ID选择器以井号（#）开头。
    • 示例：#header {font-size: 24px;}，会选择页面上id属性值为“header”的元素，如<div id="header"></div>，并将其字体大小设置为24像素。需要注意的是，ID在页面中应该是唯一的。

组合选择器

  • 后代选择器
    • 定义：由两个选择器组成，中间用空格隔开。它会选择第一个选择器所匹配元素的后代元素中符合第二个选择器的元素。
    • 示例：.container p {color: green;}，会选择页面上所有class为“container”的元素内部的<p>元素，并将其字体颜色设置为绿色。
  • 子代选择器
    • 定义：由两个选择器组成，中间用大于号（>）隔开。它会选择第一个选择器所匹配元素的直接子元素中符合第二个选择器的元素。
    • 示例：.parent > div {border: 1px solid black;}，会选择页面上所有class为“parent”的元素的直接子元素中的<div>元素，并为其添加黑色的1像素实线边框。
  • 相邻兄弟选择器
    • 定义：由两个选择器组成，中间用加号（+）隔开。它会选择第一个选择器所匹配元素的紧邻的下一个同级元素，且该同级元素符合第二个选择器。
    • 示例：.title + p {margin-top: 0;}，会选择页面上所有class为“title”的元素紧邻的下一个<p>元素，并将其上边距设置为0。
  • 通用兄弟选择器
    • 定义：由两个选择器组成，中间用波浪号（~）隔开。它会选择第一个选择器所匹配元素之后的所有同级元素中符合第二个选择器的元素。
    • 示例：.item ~ span {color: orange;}，会选择页面上所有class为“item”的元素之后的所有同级<span>元素，并将其字体颜色设置为橙色。

伪类选择器

  • 链接伪类选择器
    • :link：选择未被访问的链接。
    • :visited：选择已被访问的链接。
    • :hover：选择鼠标悬停在上面的元素。
    • :active：选择被激活（如被点击）的元素。
    • 示例：a:hover {text-decoration: none;}，当鼠标悬停在链接上时，会移除链接的下划线。
  • 结构伪类选择器
    • :first-child：选择其父元素的第一个子元素。
    • :last-child：选择其父元素的最后一个子元素。
    • :nth-child(n)：选择其父元素的第n个子元素，n可以是数字、关键字（odd、even）或公式（如2n+1）。
    • 示例：li:first-child {font-weight: bold;}，会选择<ul>或<ol>列表中的第一个<li>元素，并将其字体加粗。
  • 动态伪类选择器
    • :focus：选择获得焦点的元素，常用于表单元素。
    • :checked：选择被选中的表单元素，如单选按钮或复选框。
    • 示例：input:focus {border-color: green;}，当输入框获得焦点时，会将其边框颜色设置为绿色。

伪元素选择器

  • 定义：用于选择元素的特定部分，如元素的首行、首字母等。在CSS中，伪元素选择器以两个冒号（::）开头。
  • 常见伪元素选择器
    • ::before：在元素内容的前面插入生成的内容。
    • ::after：在元素内容的后面插入生成的内容。
    • ::first-line：选择元素的第一行。
    • ::first-letter：选择元素的第一个字母。
    • 示例：p::first-letter {font-size: 2em;}，会选择段落的第一个字母，并将其字体大小设置为段落字体大小的两倍。
      选择器可以组合使用，以实现更精确的选择。例如，.container > p:first-child:hover 会选择class为“container”的元素内部的直接子元素 <p> 元素中的第一个子元素，并且当鼠标悬停在其上时应用样式。

选择器权重

CSS选择器权重的计算规则如下：

选择器类型及权重值

  1. 内联样式：权重值为1000，直接写在HTML元素的style属性中的样式，具有最高优先级。
  2. ID选择器：权重值为100，以#开头，用于选择具有特定ID的元素。
  3. 类选择器、属性选择器和伪类选择器：权重值为10，类选择器以.开头，属性选择器根据元素的属性来选择元素，伪类选择器用于选择处于特定状态的元素，如:hover、:active等。
  4. 元素选择器和伪元素选择器：权重值为1，元素选择器用于选择元素类型，伪元素选择器用于选择元素的特定部分，如::before、::after。
  5. 通用选择器、子选择器、相邻兄弟选择器和后代选择器：权重值为0，这些选择器在实际计算权重时不计入，因为它们不影响权重值。

权重计算规则

  • 当一个样式规则由多个选择器组合而成时，其权重是各个选择器权重值的相加。例如，#myId.myClass p的权重计算为0,1,0,0 + 0,0,1,0 + 0,0,0,1 = 0,1,1,1。
  • 当多个样式规则应用于同一个元素且存在样式冲突时，浏览器会按照权重值从高到低的顺序来比较。首先比较权重的第一个部分，如果第一个部分不同，则权重值大的样式规则优先应用；如果第一个部分相同，则比较第二个部分，以此类推。如果所有部分的权重值都相同，则后面定义的样式规则优先应用。

使用!important

  • 使用!important声明的样式具有最高优先级，权重可视为10000，这可以覆盖任何其他权重的样式，但应谨慎使用，因为它会使得样式难以维护。

示例

假设我们有以下HTML和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 权重示例</title>
    <style>
        div {
            color: blue;
        }
        .example-class {
            color: green;
        }
        #example-id {
            color: red;
        }
    </style>
</head>
<body>
    <div id="example-id" class="example-class" style="color: purple;">这是一个示例文本。</div>
</body>
</html>

在这个例子中，<div>元素的color属性将被设置为紫色。原因在于内联样式的权重最高（1000），其次是ID选择器（100），然后是类选择器（10），最后是元素选择器（1）。