CSS-基本选择器

CSS选择器

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

1.1 基本选择器

1.标签选择器 : 选择一类标签 标签{}

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

    <style>
        /*标签选择器，会选择页面上所有这个标签的元素*/
        h1{
            color: #45afff;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>欢迎你</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式  .class的名称{}
        好处：可以复用
        */
        .z1{
            color: #45afff;
        }
        .z2{
            color: green;
        }
    </style>

</head>
<body>

<h1 class="z1">标题1</h1>
<h1 class="z2">标题2</h1>
<h1 class="z1">标题3</h1>
<p class="z1">p标签</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器： id必须保证全局唯一，不能复用
           #id名称{}
           不遵循就近原则，固定的
           id选择器 > class选择器 > 标签选择器
        */
        #i1{
            color: #45afff;
        }
        .c1{
            color: red;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>

<h1 id="i1" class="c1">标题1</h1>
<h1 class="c1">标题2</h1>
<h1 class="c1">标题3</h1>
<h1>标题4</h1>

</body>
</html>

优先级：
id > class > 标签

posted @ 2020-08-28 20:34  LaughTale  阅读(142)  评论(0)    收藏  举报