zoukankan      html  css  js  c++  java
  • CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器

    如果希望所有的元素都符合某一种样式,可以使用通配符选择器.

    基本语法:

    *{margin:0; padding:0}
    

    可以让所有的html元素的外边距和内边距都默认为0.
    写一段html代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <p>hello world</p>
    </body>
    </html>
    

    用浏览器打开后,效果跟下面一样:

    这个时候想让字体距离浏览器的边距为0时,就可以使用通配符选择器了.

    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
        </style>
    </head>
    <body>
    <p>hello world</p>
    </body>
    </html>
    

    用浏览器打开后的效果如下:

    可以看到字体距离浏览器的边距差不多为0了.

    2.组合选择器

    css文件中,组合选择器可以是id选择器,类选择器,html标签选择器等 

    实例代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span1{
                color:red;
                font-weigth:bold;
            }
            .span2{
                color:red;
                font-weight:bold;
                font-size:30px;
            }
            .span3{
                color:red;
                font-weight:bold;
                font-size:50px;
                background-color:silver;
            }
            .span4{
                color:red;
                font-weight:bold;
                font-size:50px;
                background-color:silver;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
    <span class="span1">黄鹤楼送孟浩然之广陵</span><br>
    <span class="span1">故人西辞黄鹤楼</span><br>
    <span class="span2">烟花三月下扬州</span><br>
    <span class="span3">孤帆远影碧空尽</span><br><br>
    <span class="span4">唯见长江天际流</span><br>
    </body>
    </html>
    

    刷新浏览器后显示的效果如下:

    虽然达到了效果,但是所用到的代码太烦杂了,可以使用更好的办法.

    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span1,.span2,.span3,.span4{
                color:red;
                font-weight:bold;
            }
            .span2{
                font-size:30px;
            }
            .span3{
                font-size:50px;
                background-color:silver;
            }
            .span4{
                font-size:50px;
                background-color:silver;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
    <span class="span1">黄鹤楼送孟浩然之广陵</span><br>
    <span class="span1">故人西辞黄鹤楼</span><br>
    <span class="span2">烟花三月下扬州</span><br>
    <span class="span3">孤帆远影碧空尽</span><br><br>
    <span class="span4">唯见长江天际流</span><br>
    </body>
    </html>
    

    刷新浏览器,看到的效果跟上面的是一样的.

    现在想要把网页中所有的字体颜色都变成绿色的,就只用修改一行代码就可以了.
    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span1,.span2,.span3,.span4{
                color:green;
                font-weight:bold;
            }
            .span2{
                font-size:30px;
            }
            .span3{
                font-size:50px;
                background-color:silver;
            }
            .span4{
                font-size:50px;
                background-color:silver;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
    <span class="span1">黄鹤楼送孟浩然之广陵</span><br>
    <span class="span1">故人西辞黄鹤楼</span><br>
    <span class="span2">烟花三月下扬州</span><br>
    <span class="span3">孤帆远影碧空尽</span><br><br>
    <span class="span4">唯见长江天际流</span><br>
    </body>
    </html>
    

    修改后的效果如下:

    现在再来修改代码,在span2这个类标签中添加一个颜色属性,其值为红色的,效果会怎么样呢??

    修改后的代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span1,.span2,.span3,.span4{
                color:green;
                font-weight:bold;
            }
            .span2{
                font-size:30px;
                color:red;
            }
            .span3{
                font-size:50px;
                background-color:silver;
            }
            .span4{
                font-size:50px;
                background-color:silver;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
    <span class="span1">黄鹤楼送孟浩然之广陵</span><br>
    <span class="span1">故人西辞黄鹤楼</span><br>
    <span class="span2">烟花三月下扬州</span><br>
    <span class="span3">孤帆远影碧空尽</span><br><br>
    <span class="span4">唯见长江天际流</span><br>
    </body>
    </html>
    

    刷新浏览器后,显示的效果如下:

    可以看到span3标签里的属性覆盖了span1里的颜色设置.

    关于组合选择器的多元素选择器的说明:

    1.为了代码简洁,可以把各个选择器的共同的样式写在一起,做成多元素选择器
    2.如果样式发生了冲突,以写在后面的样式为准.
  • 相关阅读:
    python3 获取n天后的日期时间
    python3 获取n年前日期
    RequestsDependencyWarning: urllib3 (1.25.2) or chardet (3.0.4) doesn't match a supported version!
    html5 富文本编辑器
    python3 md5 加密
    python3 获取当前日期以及7天后的日期(2016-03-20 11:45:39 形式)
    python3 生成随机手机号
    python 列表 字典转json
    (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1076)')))
    【Python】时间与时间戳
  • 原文地址:https://www.cnblogs.com/renpingsheng/p/7299279.html
Copyright © 2011-2022 走看看