CSS基本选择器

最新推荐文章于 2022-09-29 02:23:20 发布

dawn_8300

最新推荐文章于 2022-09-29 02:23:20 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/weixin_43903813/article/details/112390234

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

三种基本选择器

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

基本选择器

标签选择器

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

h1{
    color: #225378;
    background: #b4a53b;
    border-radius: 30px;
}

h1为标签

类选择器 class

选择所有class属性一致的标签，跨标签

同一个标签，但是颜色不同，则不能用标签选择器。在标签内定义class，并在style中分别用类选择器定义颜色

好处：可以多个标签归类，是同一个class，可以复用。例如标题1和4

类选择器的格式：

.类名{

}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #225378;
        }
        .c2{
            color: #360505;
        }
        .c3{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="c1">标题1</h1>
<h1 class="c2">标题2</h1>
<h1 class="c3">标题3</h1>
<h1 class="c1">标题4</h1>
</body>

id选择器

格式：#+id名称{}

id必须保证全局唯一

    <style>
        #i1{
            color: #225378;
        }
    </style>
</head>
<body>
<p>
    <li id="i1">1</li>
    <li>2</li>
    <li>3</li>
</p>

优先级

不遵循就近原则，固定的

id选择器>class选择器>标签选择器

dawn_8300

关注

0
点赞
踩
1

收藏

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

三种基本选择器作用：选择界面上的某一个或者某一类元素基本选择器标签选择器标签选择器会选择到页面上所有的这个标签的元素h1{ color: #225378; background: #b4a53b; border-radius: 30px;}h1为标签类选择器 class选择所有class属性一致的标签，跨标签同一个标签，但是颜色不同，则不能用标签选择器。在标签内定义class，并在style中分别用类选择器定义颜色好处：可以多个标签归类，是同一个class
复制链接

扫一扫