CSS3选择器增强

CSS3选择器在前端开发中扮演着关键角色，它大幅提升了元素定位的灵活性和精确度。从属性匹配到结构伪类，新特性让开发者能够更高效地控制页面样式。

属性选择器的扩展

CSS3增强了属性选择器的匹配模式，支持更复杂的字符串匹配逻辑：

/* 匹配href属性以"https"开头的链接 */
a[href^="https"] {
  color: #4CAF50;
}

/* 匹配src属性包含"logo"的图片 */
img[src*="logo"] {
  border: 2px solid blue;
}

/* 匹配data-type属性以"-primary"结尾的元素 */
[data-type$="-primary"] {
  background-color: gold;
}

新增的~=运算符可以匹配属性值中的独立单词：

/* 匹配class属性包含"alert"单词的元素 */
[class~="alert"] {
  font-weight: bold;
}

结构伪类选择器

CSS3引入的结构伪类可以基于DOM树中的位置进行选择：

/* 选择父元素下的第3个子元素 */
li:nth-child(3) {
  transform: scale(1.1);
}

/* 从末尾开始计数选择 */
tr:nth-last-child(2) {
  background-color: #f5f5f5;
}

/* 奇偶行选择 */
tbody tr:nth-of-type(odd) {
  background: #eee;
}

/* 匹配同类型中的第一个元素 */
p:first-of-type {
  text-indent: 2em;
}

:not()伪类可以排除特定元素：

/* 选择所有不是.disabled的按钮 */
button:not(.disabled) {
  cursor: pointer;
}

UI状态伪类选择器

针对表单控件的状态选择更加丰富：

/* 匹配已勾选的复选框 */
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px #2196F3;
}

/* 匹配禁用的输入框 */
input:disabled {
  opacity: 0.6;
}

/* 匹配范围输入控件的当前值 */
input[type="range"]::-webkit-slider-thumb {
  background: #ff5722;
}

/* 匹配必填字段 */
input:required {
  border-left: 3px solid red;
}

目标伪类与语言选择器

:target可以匹配URL片段标识符对应的元素：

/* 当URL包含#section1时生效 */
#section1:target {
  animation: highlight 1s;
}

语言选择器支持根据lang属性精确匹配：

/* 匹配中文内容 */
:lang(zh) {
  font-family: "Microsoft YaHei";
}

组合选择器的增强

CSS3改进了选择器的组合方式：

/* 直接相邻兄弟选择器 */
h2 + p {
  margin-top: 0;
}

/* 后续所有兄弟选择器 */
h2 ~ p {
  line-height: 1.6;
}

/* 多重属性组合选择 */
input[type="text"][required][placeholder] {
  border-color: #ff9800;
}

伪元素的新特性

::before和::after伪元素支持更多样式控制：

/* 创建自定义列表标记 */
li::marker {
  content: "→";
  color: #e91e63;
}

/* 首字母下沉效果 */
p::first-letter {
  font-size: 200%;
  float: left;
}

/* 文本选择时的样式 */
::selection {
  background: #ffeb3b;
  color: #000;
}

响应式选择策略

结合媒体查询的选择器可以实现响应式样式：

/* 在移动设备上修改导航样式 */
@media (max-width: 768px) {
  nav > ul > li {
    display: block;
  }
  
  nav > ul > li + li {
    border-top: 1px solid #ddd;
  }
}

性能优化建议

虽然CSS3选择器强大，但需注意性能影响：

/* 不推荐 - 性能较差 */
div.container > ul.list > li.item > a.link {}

/* 推荐 - 更高效的写法 */
.link {
  /* 样式规则 */
}

避免使用通配符选择器进行全局重置：

/* 避免这样使用 */
* {
  margin: 0;
  padding: 0;
}

/* 改为显式指定 */
body, h1, p, ul {
  margin: 0;
  padding: 0;
}

实际应用案例

创建斑马纹表格的现代方法：

/* 使用CSS3选择器实现 */
table {
  width: 100%;
  border-collapse: collapse;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

构建响应式导航菜单：

<nav class="responsive-nav">
  <button class="menu-toggle">☰</button>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>

.responsive-nav ul {
  display: flex;
}

@media (max-width: 600px) {
  .responsive-nav ul {
    display: none;
  }
  
  .responsive-nav .menu-toggle {
    display: block;
  }
  
  .responsive-nav ul.show {
    display: block;
  }
  
  .responsive-nav li + li {
    border-top: 1px solid #eee;
  }
}

选择器的层叠与优先级

CSS3选择器的优先级计算规则：

/* 优先级计算示例 */
#header .nav li.active a {} /* 1,1,2 */
.nav li a:hover {}         /* 0,2,1 */
body #footer .link {}      /* 1,1,1 */

新增的:where()和:is()伪类可以降低优先级：

/* :where()内选择器优先级为0 */
:where(article, section) h1 {
  color: blue;
}

/* 等效于 */
article h1, section h1 {
  color: blue;
}

未来发展方向

CSS选择器Level 4草案中的新特性：

/* 匹配包含特定文本的元素 */
p:contains("重要通知") {
  border-left: 3px solid red;
}

/* 匹配空白元素 */
div:empty {
  display: none;
}

/* 范围匹配伪类 */
p:has(> img.highlight) {
  background: yellow;
}