css几种常见的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> /*head里面写样式，下面标签id等于这个就会使用这个样式，但是默认标签的id是不能重复的。css的注释*/
        #i1{
           background-color: aqua;height: 88px
        } /* id选择器，只应用于对应id的一个标签*/

        .c1{
            background-color: rosybrown;height: 88px
        } /* class选择器，应用于所有class="c1"的标签*/
        div{
            background-color: red;color: blue;
        } /*标签选择器，应用于所有此类型的标签*/
        span p{
            background-color: yellow;color: blue;
        }/*层级选择器，应用于所有span里面嵌套的p标签。span也可以写.c1等，两级是并的嵌套关系。可以多于两个层级，没有限制*/
        #i1, .c1, div, span p{
            background-color: green;color: yellowgreen;
        } /*组合选择器，应用于逗号分隔的所有命中类型标签*/
        input[type='text']{width: 200px;
            height: 150px} /*inpute type=txtx的标签应用此样式，inpute也可以是.c1.先通过标签过滤再过滤命中标签里面的type属性*/
    </style>
</head>
<body>
    <div style="background-color: aqua;height: 88px">zsq</div>  <!--css样式设置，在标签的style里面写-- >
    <div id="i1">zsq1</div>  <!--id选择器-->
    <span> <!--默认空的span标签是不占位置的-->
        <p>123</p>  <!--层级选择器-->
    </span>
    <div class="c1">zsq2</div>  <!--class选择器,最常用的。-->
</body>
</html>
css几种常见的选择器

猜你喜欢
