CSS 基础选择器的使用

最新推荐文章于 2023-05-14 14:58:55 发布

CodeDoraemon

最新推荐文章于 2023-05-14 14:58:55 发布

阅读量189

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40417070/article/details/113182198

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

title: CSS 基础选择器的使用

1. CSS 选择器的作用

在这里插入图片描述
选择器更具不同需求把不同的标签选择出来，此为选择器的作用，简答来说就是选择标签使用

选择标签
设置标签的样式

2. 选择器的分类

基础选择类和符合选择类
在这里插入图片描述

2.1 标签选择器

在这里插入图片描述

2.2 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之标签选择器</title>

    <style>
        /*标签选择器 ： 写上标签名 */
        /*标签选择器 以标签名为选择的对象，进行属性的设置 */
        /*优点：可以统一设置*/
        /*缺点：不能差异化设置*/
        p {
            color: green;
        }
        div {
            color:pink;
        }
    </style>
</head>
<body>

    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    
</body>
</html>

3. 类选择器

可以差异化选择不同的标签，单独选择一个或者几个标签，而可以使用类选择器
在这里插入图片描述

类命名规则
记忆方法：
样式点定义
结构类调用
一个或多个
类开发最常用

3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        ///*将第一个的 <li> 改变属性*/
        /*第一步 设置一个类*/
        /*谁想改变颜色，谁去调用即可*/
        /*类的强大之处，可以选择一个或者几个标签*/
        //类选择器口诀：样式点定义 结构类（class） 调用
        //一个或者多个 开发最常用
    </script>
    <style>
        
            .red {              /*点右面的名字是自己起的*/
                color: red;
            }
            .green {
                color: green;
            }

    </style>
</head>
<body>
    <body>
        <ul>
            <!-- 下面的标签可以随意调用上面的即可实现差异化处理 -->
            <li class="red">你</li>
            <li class="green">好</li>
            <li class="red">呀</li>
            <li class="green">喜欢</li>
            <li class="red">你啊</li>
        </ul>
    </body>
    <p class="green">这个也变为绿色</p>
    
</body>
</html>