Posted inCSS HTML 前端

CSS 选择器完全指南：从基础到伪类与伪元素

CSS 选择器完全指南：从基础到伪类与伪元素
阅读量:50

一、什么是 CSS 选择器？

CSS 选择器是用于定位HTML文档中特定元素的模式规则，通过选择器可以为网页中的元素精确添加样式。掌握选择器是成为CSS高手的必经之路

p {
    color: blue;
}

选中所有<p>标签元素

2. 类选择器

.highlight {
    background-color: yellow;
}

选中所有包含class="highlight"的元素

3. ID选择器

main-header {
    font-size: 24px;
}

选中id="main-header"的唯一元素

4. 通配符选择器

{
    margin: 0;
    padding: 0;
}

选中页面所有元素

5. 群组选择器

h1, h2, h3 {
    font-family: 'Arial';
}

同时选中多个元素

6. 后代选择器

article p {
    line-height: 1.6;
}

选中<article>内的所有<p>元素

三、伪类选择器（Pseudo-classes）

状态伪类

a:hover {
    color: red;
}

input:focus {
    border-color: blue;
}

li:first-child {
    font-weight: bold;
}

结构伪类

tr:nth-child(odd) {
    background: #f8f8f8;
}

div:last-of-type {
    border-bottom: none;
}
伪类说明
:hover鼠标悬停状态
:active元素被激活时
:nth-child(n)第n个子元素
:not(selector)反向选择

四、伪元素（Pseudo-elements）

常用伪元素

p::first-letter {
    font-size: 200%;
}

blockquote::before {
    content: "“";
    font-size: 3em;
}

::selection {
    background: pink;
}

伪元素 && 伪类

特性伪类伪元素
语法单冒号（:）双冒号（::）
作用元素的不同状态创建虚拟元素
示例:hover, :focus::before, ::after

五、最佳实践与注意事项

  1. 避免过度使用ID选择器
  2. 伪元素必须配合content属性使用
  3. 伪类的顺序影响效果（LVHA顺序：:link → :visited → :hover → :active）
  4. 合理使用浏览器兼容性前缀

总结

通过组合使用基础选择器、伪类和伪元素，可以：
✅ 精准定位页面元素
✅ 创建动态交互效果
✅ 优化代码结构
✅ 实现复杂布局效果

本文为【qingxue.top】原创

未经允许严禁转载！
Tags: