CSS基本选择器

林的快手

已于 2025-02-19 19:48:04 修改

阅读量425

点赞数 3

分类专栏： HTML+CSS 文章标签： css 前端算法开发语言 java

于 2025-02-19 19:44:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65752158/article/details/145737084

版权

HTML+CSS 专栏收录该内容

20 篇文章

订阅专栏

1. 通配选择器

作用：可以选中所有的 HTML 元素。

语法：

* {
属性名: 属性值;
}

举例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配选择器</title>
 
    <style>
        * {
            color: red;
        }
    </style>

</head>
<body>
     <p>学习css最重要的是坚持</p>
     <p>学习web后端最重要的是仔细</p>
     <p>这样才能找到工作</p>
</body>
</html>

2. 元素选择器

作用：为页面中 某种元素 统一设置样式。

语法

标签名 {
属性名: 属性值;
}

举例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
 
    <style>
        p{
            color: beige;
        }
    </style>

</head>
<body>
     <p>学习css最重要的是坚持</p>
     <p>学习web后端最重要的是仔细</p>
     <p>这样才能找到工作</p>
</body>
</html>

3. 类选择器

作用：根据元素的 class 值，来选中某些元素。

语法

.类名 {
属性名: 属性值;
}

举例：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>

    <style>
        .red {
            color: red;
        }
        .bulue{
            color: blue;
        }
        .px{
            font-size: 30px;
        }
    </style>

</head>

<body>
    <p class="red">学习css最重要的是坚持</p>
    <p class="bulue">学习web后端最重要的是仔细</p>
    <p class="px">这样才能找到工作</p>
</body>

</html>

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用

英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名

要有意义，做到 “见名知意”。

3. 一个元素不能写多个 class 属性，下面是错误示例：



<h1 class = "speak" class = "big" > 你好啊 </h1>

4. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

4. ID选择器

作用：根据元素的 id 属性值，来 精准的 选中某个元素。

语法：

#id值 {
属性名: 属性值;
}

举例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器</title>

    <style>
        #red {
            color: red;
        }
        #bulue{
            color: blue;
        }
        #px{
            font-size: 30px;
        }
    </style>

</head>

<body>
    <p id="red">学习css最重要的是坚持</p>
    <p id="bulue">学习web后端最重要的是仔细</p>
    <p id="px">这样才能找到工作</p>
</body>

</html>

注意：

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空

格、区分大小写。

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

一个元素可以同时拥有 id 和 class 属性。

类选择器

选中所有特定类名（ class 值）的元素 —— 使用频率很高

综合

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器综合</title>

    <style>
        #red{
            color: red;
        }
        .gree{
            font-size: 100px;
        }
        p{
            background-color: azure;
        }
       
    </style>

</head>

<body>
    <p id="red" class="gree blue">学习css最重要的是坚持</p>
    <p id="bulue">学习web后端最重要的是仔细</p>
    <p id="px">这样才能找到工作</p>
</body>

</html>