三类基本选择器

最新推荐文章于 2022-07-04 10:37:49 发布

之樾

最新推荐文章于 2022-07-04 10:37:49 发布

阅读量229

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43021902/article/details/114633203

版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*标签选择器，会选择到页面上所有的*/
        h1{
        color:green;
background: blue;
        border-radius: 24px;
        }
        p{
        font-size:80px
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<p>听老师说</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式:  .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .a{color:green}
        .b{
        color:pink;
        }
    </style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1 class="a">标题3</h1>
<p class="b">p标签</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #a{color:pink;}
        .b{color:green;}
        h1{
        color:blue;
        }
    </style>
</head>
<body>
<h1 id="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1 class="b">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id>class>标签

之樾

关注

0
点赞
踩
0

收藏

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

标签选择器：选择一类标签标签{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>/*标签选择器，会选择到页面上所有的*/ h1{ color:green;background: blue; border-rad.
复制链接

扫一扫