css-三种基本选择器

最新推荐文章于 2024-01-18 10:00:51 发布

王2gou蛋

最新推荐文章于 2024-01-18 10:00:51 发布

阅读量123

点赞数

分类专栏： 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>