CSS学习01：css基础选择器

最新推荐文章于 2023-02-08 14:18:10 发布

玉安_ZhangDe

最新推荐文章于 2023-02-08 14:18:10 发布

阅读量217

点赞数

分类专栏： CSS 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_47373340/article/details/123600729

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

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

选择器大纲总结：

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同标签的选择器，例如div	不能差异化选择设置	较多	div { color:pink; }
类选择器	可以选择1个或者多个标签	可以根据需求进行选择	非常多	.list { color:pink; }
id选择器	一次只能选择一个标签	id属性只能在每个html文档中出现一次	一般和JavaScript搭配	#list { color:pink; }
通配符选择器	选择网页中所有的标签	包含的标签太多了，可能有些标签不需要去修改	使用情况不多，一般用于整个页面统一标准	* { margin:0; padding:0; }

接下来我们细说各个标签

1.标签选择器

标签选择器，可以选择当前html文档中所有相同标签的选择器，为这一类相同的选择器制定统一的css样式。

举个例子：

<!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>Document</title>
    <style>
        /* 标签选择器：选择同一类标签，设置统一的样式 */
        /* 标签选择器的缺点，不能差异化设置 */
        div {
            /* 选择器页面中所有的div设置字体颜色为红色 */
            /* color颜色属性，red就是红色 */
            color: red;
            /* 设置字体的大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <ul>
        <li>
            <div>li里面的div</div>
        </li>
    </ul>
</body>
</html>

网页示意：

2.类选择器

如果想要单独的设置一种类型里面的某一个或者多个标签，我们可以使用类（class）选择器。

举个例子：

<!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>Document</title>
    <style>
        /* css样式要写在style这个标签中 ，style标签可以在页面中任何位置，但是我们习惯写在head标签中*/
        /* 类选择器可以实现差异化设置, 类选择器定义后需要调用 */
        .first {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 类选择器需要调用 同过 class属性，而且任何标签中都可以使用class来调用类选择器 -->
    <div class="first">div1</div>
    <div>div2</div>
</body>
</html>

网页示意：

多类名选择器

我们可以给一个标签指定多个类名，也就是一个标签被多个类控制。

在标签中的class属性中写多个类名，类名之间用空格隔开

举个例子：

<!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>Document</title>
    <style>
        .div {
            /* 设置宽高、背景色 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .h3 {
            /* 设置字体的颜色和大小 */
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="div">div</div>
    <h3 class="h3">h3</h3>
    <!-- 一个标签上通过class 调用多个类名，类名中间用空格隔开即可。
        这个标签就拥有多个类名上的样式 -->
    <p class="div h3">pppp</p>
</body>
</html>

网页示意：

3.id选择器

id选择器会为有id属性的标签来指定特定的样式。

举个例子：

<!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>Document</title>
    <style>
        /* id选择器也可以差异化设置，页面布局都不要用id选择器，因为给后面javascript使用 */
        /* id选择器 我们约定在页面中只能出现一次 */
        #first {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="first">div1</div>
    <div id="first">div2</div>
</body>
</html>

页面示意：

4.通配符选择器

通配符不需要进行调用，该html文档全局自动使用。

举个例子：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: pink;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页示意：

玉安_ZhangDe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习01：css基础选择器

css基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器目录选择器大纲总结：1.标签选择器2.类选择器多类名选择器3.id选择器4.通配符选择器选择器大纲总结：基础选择器作用特点使用情况用法标签选择器可以选出所有相同标签的选择器，例如div 不能差异化选择设置较多 div { color:pink; } 类选择器可以选择1个或者多个标签
复制链接

扫一扫