JavaWeb学习之路(29)–CSS元素选择器使用详解

爱被打了一巴掌 2022-08-28 05:49 207阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 什么是选择器
 *  3. 使用元素选择器
 *  4. 网页整体解析
 *  5. 元素选择器的优点
 *  6. 小结

# 1. 前言 #

在之前学习CSS的过程中，大家想必也发现了一些问题。

通过style属性编写CSS代码，带来的第一个问题，就是代码比较杂乱，HTML中混杂着CSS的部分，看起来就不愉快。

第二个问题，就是每个标签的CSS都得手动编写，哪怕有几个标签我们想给他们设置一样的样式，也得完全从头编写，非常繁琐。

本篇就来介绍下CSS中的基本选择器，可以非常好的解决此类问题。

而在实际项目开发过程中，CSS一般也是通过选择器应用到标签元素上的。

# 2. 什么是选择器 #

我们知道，一组CSS代码，就是一组样式规则，之前我们通过style属性，将CSS样式规则设置到标签元素上。

选择器就是标签元素的筛选器，同样是CSS样式规则，我们可以通过选择器，来选择应用到某个或者某些标签元素上。也就是说，**选择器是用来选择标签元素的**。

# 3. 使用元素选择器 #

如果我们想给四个段落设置文本颜色为蓝色，使用style属性设置，则代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p style="color:blue;">黄河远上白云间</p>
        <p style="color:blue;">一片孤城万仞山</p>
        <p style="color:blue;">羌笛何须怨杨柳</p>
        <p style="color:blue;">春风不度玉门关</p>
    </body>
    </html>

而如果我们使用元素选择器，则改为如下操作：

第一步，在head区域添加`<style>`标签，head区域可设置应用于整个网页的规则，例如charset。此处编写的style标签，其内部的规则也是应用于整个网页的。

第二步，在`<style>`中编写选择器，也就是说我们想选择哪些HTML标签元素，来修改他们的样式。此处我们想修改的是网页上所有p元素的样式，所以我们写一个`p`，代表我们选择`p`元素。

第三步，为选择器添加样式。我们已经通过选择器选择了所有p元素，此时可以为其设定样式了，代码如下：

<head>
        <meta charset="utf-8">
        <style>
            p {
          
                color: blue;
            }
        </style>
    </head>

注意，p后面的大括号，表示p的样式规则集。也就是说大括号内的样式代码，都会应用于p这个选择器。大括号内就写CSS代码就行了，还是原来`cssName:cssValue;`这种格式。

# 4. 网页整体解析 #

我们来看下改完之后的网页代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <style>
            p {
          
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>黄河远上白云间</p>
        <p>一片孤城万仞山</p>
        <p>羌笛何须怨杨柳</p>
        <p>春风不度玉门关</p>
    </body>
    </html>

在head区域有style标签，所以其中的样式规则会应用于整个网页。

p是元素选择器，所以后面大括号的的样式，会应用于网页上所有的p元素，也就是所蓝色这个文本效果，会在所有p标签生效，所以效果如下：  
![在这里插入图片描述][a362996d80904ad286a25382d81d3c55.png]

# 5. 元素选择器的优点 #

由上面的例子可见，我们不用元素选择器，也能实现所有p标签文本蓝色的效果，那么使用元素选择器后，到底有什么好处呢。

其实好处还是挺多的，听我来说说：

1.  代码变少了。之前要为每个p标签编写CSS代码，现在只需要在头部写一行。
2.  更好维护了。之前如果要修改颜色，需要把每个p标签style内的代码进行修改，现在只需要修改头部这一处。
3.  代码更清晰。之前CSS和HTML代码其实是混在一起的，不好区分。使用选择器后，CSS代码全部集中于头部，很明显更好区分，更加清晰了。

# 6. 小结 #

元素选择器可以一次性将样式应用于某种标签，很好很强大。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[a362996d80904ad286a25382d81d3c55.png]: /images/20220828/25ce2800402948e2bdf66287fcdfb17f.png