MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS 基本选择器的使用技巧

2024-11-093.0k 阅读

元素选择器

在CSS中，元素选择器是最为基础的选择器类型，它通过匹配文档中的元素名称来选中相应的元素。例如，我们想要选中页面中所有的<p>元素，可以这样写：

p {
    color: blue;
}

上述代码会将页面中所有<p>元素内的文本颜色设置为蓝色。这是因为元素选择器会选中HTML文档里所有名为p的元素节点。

元素选择器简单直接，它是构建CSS样式的基石。在大型项目中，我们经常会用元素选择器为整个页面的特定元素设置通用样式。比如，对于所有的标题元素<h1>到<h6>，我们可以一次性设置它们的字体、字号等基础样式：

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans - serif;
    margin-bottom: 10px;
}

这样，所有标题元素都拥有了相同的字体家族，并且在底部都有10像素的外边距。

从本质上讲，元素选择器依据的是HTML文档的标签结构。浏览器在渲染页面时，会按照文档树的结构，从上到下、从左到右地遍历节点。当遇到与元素选择器匹配的标签时，就将对应的样式应用到该元素及其子元素上（某些继承性的样式）。

类选择器

类选择器允许我们根据元素的class属性值来选中一组元素。在HTML中，一个元素可以有一个或多个class值，通过在CSS中使用点号（.）加上类名来定义类选择器。例如，假设有如下HTML代码：

<div class="highlight">这是一个有highlight类的div</div>
<p class="highlight">这是一个有highlight类的p</p>

在CSS中，我们可以这样设置这些具有highlight类的元素的样式：

.highlight {
    background-color: yellow;
}

此时，上述<div>和<p>元素都会有黄色的背景，因为它们都拥有highlight这个类。

类选择器的优势在于其灵活性。我们可以给不同类型的元素添加相同的类，从而快速统一它们的样式。比如，在一个导航栏中，可能有<a>链接和<button>按钮，我们希望它们在鼠标悬停时都有特定的样式，就可以给它们添加相同的类：

<nav>
    <a href="#" class="nav-item">首页</a>
    <button class="nav-item">联系我们</button>
</nav>

.nav-item:hover {
    color: red;
}

这样，当鼠标悬停在导航栏的链接或按钮上时，文本颜色都会变为红色。

从底层原理看，浏览器在匹配类选择器时，会在文档树中查找class属性值包含目标类名的元素。这里需要注意的是，类名是大小写敏感的，.Highlight和.highlight会匹配不同的元素（假设HTML中有这样不同大小写类名的元素）。

ID选择器

ID选择器通过元素的id属性来选中特定的单个元素。在CSS中，使用井号（#）加上id值来定义ID选择器。例如，有如下HTML代码：

<div id="main-content">这是主要内容区域</div>

在CSS中可以这样设置该div的样式：

#main-content {
    width: 80%;
    margin: 0 auto;
}

上述代码将id为main-content的div宽度设置为父元素的80%，并且水平居中显示。

ID选择器具有唯一性，在HTML文档中，每个id值应该是唯一的，这意味着通过ID选择器选中的元素是独一无二的。通常，ID选择器用于设置页面中特定区域的样式，比如页面的头部、主体内容区域或页脚等。例如：

<header id="site-header">
    <h1>我的网站</h1>
</header>

#site-header {
    background-color: lightblue;
    padding: 20px;
}

这样就为网站的头部设置了浅蓝色背景和20像素的内边距。

从浏览器渲染的角度，ID选择器的匹配效率较高，因为它是唯一标识，浏览器一旦找到匹配的id元素，就会应用样式，不需要再继续搜索文档树。但在实际使用中，不建议过度使用ID选择器来设置样式，因为它的特殊性会使样式难以复用，并且在维护和修改样式时可能会带来一些麻烦。

通配选择器

通配选择器用星号（*）表示，它会选中文档中的所有元素。例如，想要去除所有元素的默认内外边距，可以这样写：

* {
    margin: 0;
    padding: 0;
}

上述代码会将页面中所有元素的外边距和内边距都设置为0。

通配选择器在一些初始化样式的场景中非常有用。比如，为了统一不同浏览器对某些元素的默认样式差异，我们可以使用通配选择器来重置一些基本样式。然而，由于通配选择器会选中所有元素，它对性能有一定的影响，尤其是在大型文档中。浏览器需要遍历整个文档树来匹配通配选择器，这会增加渲染的时间。

在实际项目中，应谨慎使用通配选择器。如果只是想对特定类型的元素进行初始化样式设置，优先使用元素选择器会更加高效。例如，如果只想重置所有块级元素的内外边距，可以这样写：

div, p, h1, h2, h3, h4, h5, h6, ol, ul, li {
    margin: 0;
    padding: 0;
}

这样既能达到目的，又能减少对性能的影响。

组合选择器

组合选择器是将多个基本选择器组合在一起，以更精确地选中元素。常见的组合选择器有后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。

后代选择器

后代选择器通过空格来连接两个选择器，表示选中第一个选择器的后代元素中匹配第二个选择器的元素。例如，假设有如下HTML结构：

<ul id="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li class="dropdown">
        <a href="#">服务</a>
        <ul class="sub-menu">
            <li><a href="#">Web开发</a></li>
            <li><a href="#">移动应用开发</a></li>
        </ul>
    </li>
</ul>

如果我们只想设置#menu下所有<a>元素的样式，可以使用后代选择器：

#menu a {
    color: blue;
    text-decoration: none;
}

这样，#menu下的所有<a>元素（包括直接子元素和更深层次的后代元素）都会应用这些样式。

后代选择器的匹配原理是，从文档树的根节点开始，先找到匹配第一个选择器的元素，然后在这些元素的后代节点中查找匹配第二个选择器的元素。这种选择器在设置复杂结构的文档样式时非常有用，比如导航菜单、树形结构等。

子选择器

子选择器使用大于号（>）连接两个选择器，它只选中第一个选择器的直接子元素中匹配第二个选择器的元素。继续以上面的HTML菜单为例，如果我们只想设置#menu下直接子<li>元素中的<a>元素的样式，可以这样写：

#menu > li > a {
    font-weight: bold;
}

此时，只有#menu下直接子<li>元素中的<a>元素会字体加粗，而sub-menu中的<a>元素不会受到影响，因为它们不是#menu的直接子元素。

子选择器的匹配范围比后代选择器更窄，它只考虑直接的父子关系，这在需要精确控制特定层级元素样式时非常有效。例如，在一个博客文章展示页面中，可能有文章标题、正文、评论等部分，我们可以通过子选择器来确保文章标题的样式不会影响到评论中的标题元素。

相邻兄弟选择器

相邻兄弟选择器使用加号（+）连接两个选择器，它选中紧跟在第一个选择器之后且匹配第二个选择器的元素，并且这两个元素必须有相同的父元素。例如，假设有如下HTML代码：

<h2>标题</h2>
<p>紧跟在标题后的段落</p>
<p>另一个段落</p>

如果我们想设置紧跟在<h2>之后的<p>元素的样式，可以使用相邻兄弟选择器：

h2 + p {
    color: green;
}

这样，紧跟在<h2>之后的那个<p>元素的文本颜色会变为绿色，而第二个<p>元素不会受到影响。

相邻兄弟选择器常用于处理文档中相邻元素之间的关系。比如，在一些图文排版中，可能希望图片之后的第一个段落有特定的样式，就可以使用相邻兄弟选择器来实现。

通用兄弟选择器

通用兄弟选择器使用波浪号（~）连接两个选择器，它选中在第一个选择器之后且匹配第二个选择器的所有元素，这些元素与第一个选择器有相同的父元素。还是以上面的HTML代码为例，如果我们想设置<h2>之后所有<p>元素的样式，可以使用通用兄弟选择器：

h2 ~ p {
    text-indent: 2em;
}

此时，<h2>之后的两个<p>元素都会有2个字符的首行缩进。

通用兄弟选择器比相邻兄弟选择器的选择范围更广，它会选中所有符合条件的兄弟元素。在实际应用中，当我们希望对某个元素之后的所有同层级元素设置相同样式时，通用兄弟选择器就派上用场了，比如在一个列表中，对某个列表项之后的所有列表项设置特定样式。

伪类选择器

伪类选择器用于根据元素的状态或位置来选择元素，而不需要在HTML中添加额外的类或id。

动态伪类

动态伪类主要用于匹配处于不同状态的元素，比如链接的访问状态、鼠标悬停状态等。常见的动态伪类有:link、:visited、:hover和:active。

:link伪类用于选择未被访问过的链接。例如：

a:link {
    color: blue;
}

这样，未被访问过的链接文本颜色会是蓝色。

:visited伪类用于选择已经被访问过的链接。例如：

a:visited {
    color: purple;
}

已访问过的链接文本颜色会变为紫色。

:hover伪类用于选择鼠标悬停在其上的元素。例如，我们可以为按钮添加悬停效果：

<button>点击我</button>

button:hover {
    background-color: lightgray;
}

当鼠标悬停在按钮上时，按钮的背景颜色会变为浅灰色。

:active伪类用于选择被激活的元素，比如用户按下鼠标按钮但还未释放时的链接或按钮。例如：

a:active {
    color: red;
}

当链接被激活时，文本颜色会变为红色。

这些动态伪类的执行顺序是有讲究的，通常遵循“爱恨原则”（LoVe/HAte），即:link - :visited - :hover - :active的顺序。如果不按照这个顺序，可能会导致某些样式无法正常显示。

结构性伪类

结构性伪类基于文档的结构来选择元素。例如，:first-child伪类用于选择父元素的第一个子元素。假设有如下HTML代码：

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

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

此时，列表的第一项会字体加粗。

:last-child伪类则用于选择父元素的最后一个子元素。例如：

li:last-child {
    color: green;
}

列表的最后一项文本颜色会变为绿色。

:nth-child(n)伪类可以选择父元素的第n个子元素。这里的n可以是数字、关键词或表达式。比如，:nth-child(2)会选中父元素的第二个子元素，:nth-child(even)会选中父元素的偶数个子元素，:nth-child(3n + 1)会选中父元素中从第一个开始，每隔3个的子元素。例如：

li:nth-child(even) {
    background-color: lightblue;
}

上述代码会使列表中的偶数项有浅蓝色背景。

结构性伪类在处理列表、表格等结构化文档元素时非常方便，能够根据元素在文档结构中的位置快速设置样式。

目标伪类

目标伪类:target用于选择当前活动的目标元素。当URL的哈希部分与元素的id匹配时，该元素就是目标元素。例如，假设有如下HTML代码：

<a href="#section1">跳转到第一部分</a>
<div id="section1">
    <h2>第一部分内容</h2>
    <p>这里是第一部分的详细内容。</p>
</div>

#section1:target {
    background-color: yellow;
}

当用户点击链接跳转到id为section1的div时，该div会有黄色背景。

目标伪类在实现页面内跳转和显示特定内容时很有用，比如制作文档的目录，点击目录项跳转到相应章节并突出显示该章节。

伪元素选择器

伪元素选择器用于创建一些不在文档树中的元素，并为其设置样式。

::before和::after

::before和::after伪元素选择器允许我们在元素的内容之前或之后插入生成的内容。例如，我们可以在每个段落之前添加一个特殊符号：

p::before {
    content: "★";
    color: red;
    margin-right: 5px;
}

这样，每个段落开头都会有一个红色的星号，并且与段落文本之间有5像素的间距。

content属性是::before和::after伪元素必须设置的，它定义了插入的内容。这个内容可以是文本、图像（通过url()函数）等。例如，在一个链接后面添加一个外部链接图标：

<a href="https://example.com" target="_blank">外部链接</a>

a[href^="https"]::after {
    content: url(icon-external-link.png);
    margin-left: 5px;
}

上述代码会在以https开头的链接后面添加一个外部链接图标。

::before和::after伪元素生成的内容属于元素的渲染树，而不是文档树，这意味着它们在文档的DOM中是不可见的，但会影响页面的布局和显示。

::first-letter和::first-line

::first-letter伪元素选择器用于选择元素的第一个字母。比如，在一个文章段落中，我们可以为首字母设置特殊样式，实现首字下沉效果：

p::first-letter {
    font-size: 2em;
    float: left;
    margin-right: 5px;
}

这样，段落的首字母会变大并向左浮动，与后面的文本形成首字下沉的效果。

::first-line伪元素选择器用于选择元素的第一行文本。例如，我们可以为段落的第一行设置不同的颜色：

p::first-line {
    color: blue;
}

此时，段落的第一行文本颜色会变为蓝色。

::first-letter和::first-line伪元素的应用场景主要在文本排版方面，能够为文本添加独特的视觉效果，增强页面的可读性和美观性。

在实际前端开发中，熟练掌握CSS基本选择器的使用技巧，能够让我们更加高效地编写样式，实现丰富多样的页面效果，同时也有助于提高代码的可维护性和性能。不同的选择器在不同的场景下各有优劣，我们需要根据具体需求灵活运用，以打造出优秀的前端界面。例如，在优化页面性能时，应尽量避免使用通配选择器和过于复杂的组合选择器，优先选择ID选择器、类选择器等高效的选择方式。在样式复用方面，类选择器则是首选，它能够让我们快速为不同元素设置相同的样式。而伪类和伪元素选择器则为我们提供了更多基于元素状态和结构的样式设置可能性，丰富了页面的交互效果和视觉表现。总之，深入理解并熟练运用这些选择器，是前端开发者必备的技能之一。