css选择器设置标签样式的实例代码

所属分类: 网页制作 / CSS 阅读数: 1989
收藏 0 赞 0 分享

css选择器

在html标签上设置style可以给标签设置属性:

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

我们还可以通过<head>标签里设置选择器,这样每种样式只需要写一遍

<head>
    <meta charset="UTF-8">
    <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必须统一的缺陷*/
.c1{
    background-color: #2459a2;
    height: 60px;
}

使用的时候:

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

3、标签选择器:把某一标签都变成这个样式:

标签选择器:把所有的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选择器设置标签样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多