掌握CSS选择器大全：开启精湛前端开发之旅

前端

2023-03-09 08:10:15

精通 CSS 选择器：掌控网页设计的超级大国

掌握 CSS 选择器的力量

CSS 选择器是现代前端开发中不可或缺的工具，它们让你能够针对特定的 HTML 元素应用样式，创造出复杂而美观的网站。从简单的基本选择器到强大的伪元素选择器，选择器提供了精确控制和灵活性的无穷可能性。

基本选择器：精准定位

通用选择器（*） ：这个万能选择器适用于页面上的所有元素。

ID 选择器（#） ：用于按元素的唯一 ID 精确匹配。

class 选择器（.） ：基于元素的 class 属性进行匹配。

标签选择器（element） ：根据元素的 HTML 标签名称进行匹配。

组合选择器：灵活应对复杂性

子元素选择器（>） ：匹配父元素中的直接子元素。

相邻兄弟选择器（+） ：匹配紧随另一个元素之后的元素。

通用兄弟选择器（~） ：匹配与另一个元素具有相同父元素的所有元素。

属性选择器：精确定位基于属性

属性存在选择器（[attribute]） ：匹配具有指定属性的元素，无论其值如何。

属性值选择器（[attribute=value]） ：匹配具有特定属性和值的元素。

属性包含选择器（[attribute~=value]） ：匹配具有指定属性且其值包含特定子字符串的元素。

属性开头选择器（[attribute^=value]） ：匹配具有指定属性且其值以特定子字符串开头的元素。

属性结尾选择器（[attribute$=value]） ：匹配具有指定属性且其值以特定子字符串结尾的元素。

伪类选择器：特殊效果

hover 伪类 ：在鼠标悬停时激活。

active 伪类 ：在元素被激活时激活，例如按钮或链接。

focus 伪类 ：在元素获得焦点时激活，例如输入字段或文本区域。

checked 伪类 ：在复选框或单选按钮被选中时激活。

伪元素选择器：创造特殊效果

::before 伪元素 ：在元素内容之前插入内容。

::after 伪元素 ：在元素内容之后插入内容。

::first-line 伪元素 ：匹配元素的第一行文本。

::first-letter 伪元素 ：匹配元素的第一个字母。

选择器优先级：样式的应用顺序

内联样式 ：优先级最高，直接应用于元素本身。
ID 选择器 ：比 class 选择器和标签选择器优先。
class 选择器 ：比标签选择器优先。
标签选择器 ：优先级最低。

代码示例：

/* 基本选择器 */
body {
  background-color: #fff;
}

/* 组合选择器 */
ul > li {
  list-style-type: none;
}

/* 属性选择器 */
a[href="example.com"] {
  color: blue;
}

/* 伪类选择器 */
button:hover {
  background-color: #000;
}

/* 伪元素选择器 */
h1::before {
  content: "Introducing CSS Selectors";
}