零基础学习WEB前端开发(十四)：CSS标签选择器及类选择器

最新推荐文章于 2024-07-06 20:00:00 发布

是刃小木啦~

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量606

点赞数

分类专栏： WEB前端开发文章标签： css 前端 css3

本文链接：https://blog.csdn.net/txr152111/article/details/121046346

版权

WEB前端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

目录

选择器分为基础选择器和复合选择器两个大类。

基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器

一、标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css格式。

1.1 基本语法

标签名{
        属性1: 值1;
        属性2: 值2;
        属性3: 值3;
         ......
}

1.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>

    <style>
        /* 标签选择器，写上标签名 */
        p {
            color: red;
        }

        div {
            color: pink;
        }

    </style>

</head>
<body>
    <p>男生</p>   <br>
    <p>男生</p>   <br>

    <div>女生</div>   <br>
    <div>女生</div>   <br>
</body>
</html>

1.3 优缺点

优点：能快速为页面中所有同类型的标签设置统一的样式。

缺点：不能差异化设置

二、类选择器

如果想要差异化选择不同的标签，单选一格或者某几个，可以使用类选择器。

2.1 基本语法

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

注意：类型前面有一个点

2.2 例子

例如，将所有拥有red类的HTML元素均为红色：

.red {
    color: red;
}

结构需要用class属性来调用：

<div calss='red'>变红色</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>

    <style>
        .red {
            color: pink;
        }
    </style>

</head>
<body>
    <ul>
        <li class="red">冰雪</li>
        <li>来生缘</li>
        <li>凉凉</li>
        <li>哈哈哈哈</li>
    </ul>
</body>
</html>

2.3 类选择器注意点

样式点定义，结构类调用

一个或多个，开发最常用

注意：

不能用标签的名字作为类名。
类名较长时，可以使用短横线类区别，这点不完全符合标识符
不要使用纯数字、中文等命令，尽量使用英文字母来表示
命名要有意义

2.4 使用类选择器画盒子

通过这个案例，练习两个地方：

类选择器的使用
div就是一个盒子，用来装网页内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .red {
                width: 100px;
                height: 100px;
                /* 背景颜色 */
                background-color: red;               
        }

        .green {
                width: 100px;
                height: 100px;
                /* 背景颜色 */
                background-color: green;               
        }

    </style>

</head>
<body>
    <!-- 绘制三个容器 -->
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>