02: css常用属性

返回顶部

　　1、其中选择器介绍

　　　　　　1. 直接在标签里的style标签写样式

　　　　　　2. id选择器（名字以“#”号开头）：只能被某一个标签使用

　　　　　　3. class选择器（名字以“.”号开头）：可以被多个标签同时引用

　　　　　　4. 标签选择器：比如你设置一个div标签选择器，那么所有div默认都会使用这个样式

　　　　　　5. 层级选择器（用空格分隔）： span div{} 只有span中定义的div才会应用这个样式

　　　　　　6. 组合选择器（用逗号分隔）： #i1，#i2{} 让id=i1，id=i2的都应用这一个样式

　　　　　　7. 属性选择器： input[type='text']{width: 100px;height: 200px}找到input标签中的type="text"标签，应用这个样式

　　　　　　　　属性选择器作用：对选择到的标签再通过属性进行一次筛选

　　　　　　注：七种选择器的优先级

　　　　　　　　1. 标签上的style优先

　　　　　　　　2. 其他都是按找head中style中定义的先后顺序：越后定义优先级越高

　　2、七种选择器代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 1. id选择器 只能被某一个标签使用*/
        #i1{
           background-color: #2459a2;
            height: 48px;
        }
        /* 2. class选择器 可以被多个标签同时引用*/
        .c1{
           background-color: olivedrab;
            height: 48px;
        }
        /* 3. 标签选择器 这个作用是指定所有div默认都会使用这个样式*/
        div{
            background-color: black;
            color: white;
        }
        /* 4. 层级选择器 只有span中定义的div才会应用这个样式*/
        span div{
            background-color: red;
            color: white;
        }
        /* 5. 组合选择器 让id=i1，id=i2的都应用同一个样式*/
        #i1，#i2{
           background-color: #2459a2;
            height: 48px;
        }
        /* 6. 属性选择器 找到input标签中的type="text"标签，应用这个样式*/
        input[type='text']{width: 100px;height: 200px}
    </style>
</head>
<body>
   <div style="height: 48px; background-color: red">style标签写样式</div>
    <div id="i1">id选择器</div>
    <div class="c1">class选择器</div>
    <div>标签选择器</div>
    <span><div>关联选择器</div></span>
    <input type="text">     <!--属性选择器-->
</body>
</html>

七种选择器代码展示

目录：

返回顶部