制作css选择器
CSS选择器基础语法
CSS选择器用于定位HTML文档中的元素，以便为其应用样式。常见的基础选择器包括：
- 元素选择器：直接使用HTML标签名（如
p、div） - 类选择器：以
.开头（如.header） - ID选择器：以
#开头（如#main-content） - 通配符选择器：
*匹配所有元素
/* 元素选择器 */
p { color: red; }
/* 类选择器 */
.error { background: yellow; }
/* ID选择器 */
#sidebar { width: 300px; }组合选择器
通过组合基础选择器可以创建更精确的匹配规则：
- 后代选择器：用空格分隔（
div p匹配div内的所有p元素） - 子元素选择器：用
>分隔（ul > li仅匹配ul的直接子元素li） - 相邻兄弟选择器：用
+分隔（h1 + p匹配紧接在h1后的第一个p） - 通用兄弟选择器：用
~分隔（h2 ~ p匹配h2之后的所有同级p）
/* 后代选择器 */
article p { font-size: 16px; }
/* 子元素选择器 */
nav > ul { list-style: none; }
/* 相邻兄弟选择器 */
h2 + p { margin-top: 0; }属性选择器
根据元素的属性及属性值进行匹配：
[attr]：匹配带有attr属性的元素[attr=value]：精确匹配属性值[attr^=value]：匹配以value开头的属性值[attr$=value]：匹配以value结尾的属性值[attr*=value]：匹配包含value的属性值
/* 匹配所有带有title属性的元素 */
[title] { color: blue; }
/* 匹配type为"text"的input */
input[type="text"] { border: 1px solid #ccc; }
/* 匹配href以https开头的a标签 */
a[href^="https"] { background: url(lock.png); }伪类与伪元素
-
伪类：用于定义元素的特殊状态
:hover、:active、:focus:first-child、:last-child:nth-child(n)、:nth-of-type(n)
-
伪元素：用于样式化元素的特定部分
::before、::after::first-line、::first-letter
/* 鼠标悬停效果 */
a:hover { text-decoration: underline; }
/* 表格隔行变色 */
tr:nth-child(even) { background: #f2f2f2; }
/* 在元素前插入内容 */
h1::before { content: "📌 "; }选择器优先级规则
当多个选择器匹配同一元素时，按照以下优先级决定最终样式：
- 内联样式（1000分）
- ID选择器（100分）
- 类/属性/伪类选择器（10分）
- 元素/伪元素选择器（1分）
- 通配符/继承样式（0分）
/* 优先级计算示例 */
#nav li.active a:hover { ... }
/* 100(id) + 1(li) + 10(.active) + 1(a) + 10(:hover) = 122 */现代CSS新增选择器
CSS3引入了许多新选择器：
:is()和:where()：接受选择器列表作为参数:has()：匹配包含特定子元素的父元素:focus-visible：仅当键盘聚焦时匹配:empty：匹配没有子元素的元素
/* 匹配article或section中的h1 */
:is(article, section) h1 { font-size: 2em; }
/* 匹配包含img的div */
div:has(img) { border: 1px solid #000; }
/* 空元素处理 */
div:empty { display: none; }
