CSS2基础——CSS选择器

Neo_Arsaka
180 阅读7分钟

1. CSS 基本选择器

  • 通配选择器
  • 元素选择器
  • 类选择器
  • id 选择器

1.1 通配选择器

  • 作用：可以选中所有的 html 元素；
  • 语法： 
    /* 选中所有元素 */
* {
    color: red;
    font-size: 40px;
}
  • 通配选择器用于清除元素的默认样式，后面会详细介绍。

1.2 元素选择器

  • 作用：为页面中的某种元素统一设置样式；
  • 语法： 
    /* 选中所有的 h1 元素 */
h1 {
    color: orange;
    font-size: 40px;
}

1.3 类选择器

  • 作用：根据元素的 class 值，来定位元素；
  • 语法： 
    /* 选中所有 class 值包含 speak 的元素 */
.speak {
    color: red;
}
  • 注意：
    • class 值是开发人员自定义的，规范是：不要使用纯数字，不要使用中文，尽量使用英文与数字的组合，若由多个单词组成，可以使用 - 做连接，例如 left-menu。
    • 一个元素不能写多个 class 属性，但是一个元素的 class 属性可以有多个值，值与值之间用空格隔开： 
      <!-- 这是错误写法，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">hello css!</h1>

<!-- 正确写法 -->
<h1 class="speak big">hello css!</h1>

1.4 ID 选择器

  • 作用：根据元素的 id 属性值，来精确的定位元素；
  • 语法： 
    #earthy {
    color: red;
    font-size: 60px;
}
  • 注意：
    • id 属性值：尽量由字母、数字、“_” 和 “-” 组成，最好以字母开头，不要包含空格，区分大小写；
    • 多个元素的 id 属性值不能相同；

2. CSS 复合选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成：

  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子元素选择器
  • ...

2.1 交集选择器

  • 作用：选中同时符合多个条件的元素；
  • 语法： 
    /* 选中类名为 beauty 的 p 元素，此种写法应用非常多！！！ */
p.beauty {
    color: blue;
}

/* 选中类名包含 rich 和 beauty 的元素 */
.rich.beauty {
    color: green;
}
  • 注意：
    • 有标签名，标签名必须写在前面；
    • id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用——因为没有意义；
    • 用的最多的交集选择器是：元素选择器搭配类名选择器，例如：p.beauty。

2.2 并集选择器

  • 作用：选中多个选择器对应的元素，又称分组选择器。
  • 语法： 
    /* 选中 id 为 peiqi，或类名为 rich，或类名为 beauty 的元素 */
#peiqi,
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}
  • 注意:
    • 最佳实践：并集选择器一般竖着写；
    • 任何形式的选择器都可以作为并集选择器的一部；
    • 并集选择器通常用于集体声明，可以缩小样式表的体积。

2.3 html 元素间的关系

html 元素之间的关系可以分为：

  • 父元素；
  • 子元素；
  • 祖先元素；
  • 后代元素；
  • 兄弟元素。

2.4 后代选择器

  • 作用：选中指定的元素中，符合要求的后代
  • 语法： 
    /* 选中 ul 中的所有 li */
ul li {
    color: red;
}
/* 选中 ul 中所有的 li 的 a */
ul li a {
    color: orange;
}
/* 选中类名为 subject 元素中的所有 li */
.subject li {
    color: blue;
}
/* 选中类名为 subject 元素中的所有类名为 front-end 的 li */
.subject li.front-end {
    color: skyblue;
}
  • 注意：结构一定要符合之前说的 HTML 嵌套要求，例如：不能换在 p 中写 h1~h6。

2.5 子代选择器

  • 作用：选中指定元素中，符合要求的子元素。
  • 语法： 
    /* div 中的子代 a 元素 */
div>a {
    color: red;
}
/* 类名为 persons 的元素中的子代a元素 */
.person>a {
    color: blue;
}
  • 注意：子代仅指父元素的下一级，不要和后代元素搞混！

2.6 兄弟选择器

2.6.1 相邻兄弟选择器

  • 作用，选中指定元素后，符合条件的相邻兄弟元素（所谓相邻，就是紧挨着的）；
  • 语法： 
    /* 选中 div 后紧邻的兄弟 p 元素 */
div+p {
    color: red;
}

2.6.2 通用兄弟选择器

  • 作用：选中指定元素后，符合条件的所有兄弟元素；
  • 语法： 
    /* 选中 div 后的所有兄弟 p 元素 */
div~p {
    color: red;
}

2.7 属性选择器

  • 作用：选中属性值符合一定要求的元素：
  • 语法： 
    /* 
 * [属性名] 选中具由某个属性的元素
 * 选中具由 title 属性的元素 
 */
div[title] {
    color: red;
}
/* 
 * [属性名="值"] 选中具由某个属性的元素，且属性值等于指定值的元素
 * 选中具由 title 属性的元素，且属性值为 atguigu 的元素
 */
div[title="atguigu"] {
    color: red;
}
/* 
 * [属性名^="值"] 选中具由某个属性的元素，且属性值以指定的值开头的元素
 * 选中具由 title 属性的元素，且属性值以 a 开头的元素
 */
div[title^="a"] {
    color: red;
}
/* 
 * [属性名$="值"] 选中具由某个属性的元素，且属性值以指定的值结尾的元素
 * 选中具由 title 属性的元素，且属性值以 u 结尾的元素
 */
div[title$="u"] {
    color: red;
}
/* 
 * [属性名*="值"] 选中具由某个属性的元素，且属性值包含指定值的元素
 * 选中具由 title 属性的元素，且属性值包含 g 的元素
 */
div[title*="g"] {
    color: red;
}

2.8 伪类选择器

  • 作用：选中特殊状态的元素。
  • 常用的伪类选择器：
    • 动态伪类（遵循 LVHA 的顺序，即 link、visited、hover、active）：
      • :link 超链接未被访问的状态；
      • :visited 超链接访问过的状态；
      • :hover 鼠标悬停在元素上的状态；
      • :active 元素激活（激活状态：按下鼠标不松开）的状态。
      • :focus 获取焦点的元素。
    • 结构伪类：
      • :first-child 所有兄弟元素中的第一个；
      <html>
<head>
    <style>
        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构1 */
        div>p:first-child {
            color: red;
        }
        
        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构2 */
        /* 解析逻辑是：先选中div中的所有p元素，然后检查其中的p元素是否是父元素（这里是div）的第一个儿子。显然，所有的 p 都不是父元素的第一个元素，所以都没有选中 */
        div>p:first-child {
        color: red;
        }
    </style>
</head>
<body>
    <!-- 结构1 -->
    <div>
    <p>张三：98分</p>
    <p>李四：88分</p>
    <p>王五：78分</p>
    <p>赵六：68分</p>
    </div> 
</body>
</html>
      • :last-child 所有兄弟中的最后一个；
      • :nth-child(n) 所有兄弟中的第n个；
      • :first-of-type 所有同类型兄弟元素中的第一个；
      • :last-of-type 所有同类型兄弟元素中的最后一个；
      • :nth-of-type 所有同类型兄弟元素中的第n个。

      关于 n 值：

      1. 0 或 不写：什么都选不中——几乎不用；
      2. n：选中所有子元素——几乎不用；
      3. 1～正无穷的整数：选中对应序号的子元素；
      4. 2n 或 even： 选中序号为偶数的子元素；
      5. 2n+1 或 odd：选中序号为奇数的子元素；
      6. -n+3: 选中的是前3个。
    • 否定伪类：
      • :not(选择器) 排除满足括号中条件的元素。
    • UI 伪类：
      • :checked 被选中的复选框或单选按钮；
      • :enable 可用的表单元素（没有 disabled 属性）；
      • :disbaled 不可用的表单元素（有 diabled 属性）。
    • 目标伪类（了解）
      • :target 选中锚点指向的元素。
    • 语言伪类（了解）
      • :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

2.9 伪元素选择器

  • 作用：选中元素中的一些特殊位置。
  • 常用伪元素：
    • ::first-letter 选中元素中的第一个文字；
    • ::first-line 选中元素中第一行文字；
    • ::selection 选中被鼠标选中的内容；
    • ::placeholder 选中输入框的提示文字；
    • ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性置顶内容）；
    • ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

3. 选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

  • 简单描述：行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器

  • 详细描述：

    • 计算方式：每个选择器，都可以计算出一组权重，格式为：(a,b,c)
      • a: ID 选择器的个数；
      • b: 类、伪类、属性选择器的个数；
      • c: 元素、伪元素选择器的个数。
    • 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比
    • 特殊规则：
      • 行内样式权重大于所有选择器
      • !important 的权重，大于行内样式，大于所有选择器，权重最高！
avatar
文章
阅读
粉丝