CSS选择器(1)

Leon_davis

于 2022-01-24 22:28:34 发布

阅读量467

点赞数

分类专栏： HTML+CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_43419887/article/details/122676388

版权

HTML+CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS选择器(1)

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

基本选择器

标签选择器：选择一类标签标签{}

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

    <style>
        /*标签选择器会选择到页面上所有这个标签的元素*/
        h1{
            color: #ff57a6;
        }
        p{
            font-size: 80px ;
        }
    </style>
</head>
<body>

<h1>学java</h1>
<p>听课</p>
</body>
</html>

类选择器：选择所有class属性一致的标签，跨标签 .类名

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

    <style>
        /*类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class,可以复用*/
        .davis{
            color:rebeccapurple;
        }

        .leon{
            color: antiquewhite;
        }
    </style>
</head>
<body>

<h1 class="davis">Davis</h1>
<h1 class="leon">Leon</h1>
<h1 class="davis">L0on</h1>



</body>
</html>

id选择器：全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器   id必须保证全局唯一
        #id名称{}
        */
        #davis{
            color: rebeccapurple;

        }
        .style1{
            color: blanchedalmond;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1 id="davis">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>