[CSS]2.三种基本选择器

最新推荐文章于 2024-05-20 22:08:52 发布

MyLight1109

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量79

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46285081/article/details/118910868

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

作用：选择页面上的某一个或者某一类元素

1）标签选择器

选择页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*标签选择器会选择页面上所有这个标签的元素*/
        h1{
            color: #1010cb;
            background: #b66868;
            border-radius: 10px;
        }

        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学Java</h1>
<h1>学CSS</h1>
<p>星河尽明意</p>

</body>
</html>

在这里插入图片描述

2）类选择器

类选择器的格式 .class的名称{}
好处：可以多个标签归类：同一个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        类选择器的格式 .class的名称{}
        好处：可以多个标签归类：同一个class
        */
        .LH{
            color: #1010cb;
        }

        .liu{
            color: aqua;
        }
    </style>

</head>
<body>

<h1 class="LH">标题1</h1>
<h1 class="liu">标题2</h1>
<h1 class="LH">标题3</h1>

<p class="LH">星河尽明意.</p>

</body>
</html>

在这里插入图片描述

3）id选择器

d选择器格式：必须保证全局唯一
#id名称{}

不遵循就近原则，固定的
id>类>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        id选择器格式： 必须保证全局唯一
            #id名称{}

            不遵循就近原则，固定的
            id>类>标签
         */

        #liuhui{
            color: cornflowerblue;
        }
    </style>


</head>
<body>

<h1 id="liuhui">LH</h1>
<h1>liu</h1>
<h1>hui</h1>
<h1>h</h1>
<h1>l</h1>

</body>
</html>

在这里插入图片描述

MyLight1109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS]2.三种基本选择器

作用：选择页面上的某一个或者某一类元素1）标签选择器选择页面上所有这个标签的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择页面上所有这个标签的元素*/ h1{ color:
复制链接

扫一扫