css挑选器设定标识款式的案例编码

日期:2021-03-01 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

css挑选器

在html标识上设定style能够给标识设定特性:

<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>

大家还能够根据<head>标识里设定挑选器,这样每种款式只必须写1遍

<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        <!--在这里写挑选器-->
    </style>
</head>

实际的挑选器有许多种:

1、根据id来拷贝款式

#i1{
    background-color: #2459a2;
    height: 48px;
}

在body里的标识这样用:但id不可以写好几个,因此還是不可以多用

    <div id="i1"></div>
    <div id="i1"></div>但id不可以写好几个(不标准)

2、根据class来拷贝:

/*class挑选器:用class=c1来便可以拷贝这个款式,另外防止了id务必统1的缺点*/
.c1{
    background-color: #2459a2;
    height: 60px;
}

应用的情况下:

 <div class="c1">1251251</div>能写好几个
    <div class="c1">1251253</div>能写好几个

3、标识挑选器:把某1标识都变为这个款式:

标识挑选器:把全部的div标识变为黑底白字

div{
    background-color: black;
    color: white;
}

4、等级挑选器:正中间是空格

        等级挑选器:把span标识里div标识弄成这个款式
 

  span div{
            background-color: black;
            color: white;
        }
        等级:把c1里c2里的div设定成这个款式
        .c1 .c2 div{
            background-color: black;
            color: white;
        }

5、组成挑选器:正中间是逗号

    <style>
        组成挑选器:#或.都可以以完成组成
        #i1,#i2,#i3{
            background-color: black;
            color: white;
        }
        .c5,.c6,.c7{
            background-color: black;
            color: white;
        }
    </style>

6、特性挑选器:

    <style>        
        /*特性挑选器:把type='text'的设成这个款式*/
        input[type='text']{
            width: 100px;
            height: 200px;
        }
        把自定的n的值为s1的标识设定成这个款式
        input[n='s1']{
            width: 100px;
            height: 200px;
        }
    </style>

总结

以上所述是网编给大伙儿详细介绍的css挑选器设定标识款式的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!