css-三种基本选择器

最新推荐文章于 2022-12-04 15:21:30 发布

王2gou蛋

最新推荐文章于 2022-12-04 15:21:30 发布

阅读量107

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38959934/article/details/117886190

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 标签选择器，会选择到页面上所有的这个标签的元素 */
        h1{
            color: #12ec4e;
            background: #cdbb21;
            border-radius: 20px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学习html</h1>
<h1>学习html</h1>
<p>听世界说</p>
</body>
</html>

二、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类标签的格式  .class的名称{}
         好处： 可以多个标签归类，是同一个 class，可以复用
         */
        .label1{
            color: green;
        }
        .lable2{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="label1">lable1</h1>
<h1 class="lable2">lable2</h1>
<h1 class="label1">lable3</h1>
<p class="label1">P标签</p>
</body>
</html>

三、id选择器

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

    <style>
        /* id选择器： id必须保证全局唯一！
           #id名称{}
         */
        #wang1{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="wang1">标题1</h1>
</body>
</html>

3种选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器： id必须保证全局唯一！
           #id名称{}
           优先级：
           id选择器 > class选择器 > 标签选择器
         */
        #wang1{
            color: red;
        }
        .style1{
            color: green;
        }
        h1{
            color: yellow;
        }
    </style>
</head>
<body>
<h1 class="style1" id="wang1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

在这里插入图片描述
id选择器 > class选择器 > 标签选择器

https://www.bilibili.com/video/BV1YJ411a7dy?p=5&spm_id_from=pageDriver

王2gou蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-三种基本选择器

一、标签选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 标签选择器，会选择到页面上所有的这个标签的元素 */ h1{ color: #12ec4e; background:
复制链接

扫一扫