zoukankan      html  css  js  c++  java
  • (6)基础选择器+选择器优先级

    选择器的种类:

    1、标签选择器

    语法:div{}

    2、通配选择器

    语法: *{}

    3、class选择器(类选择器):

    语法: .class{]

    4、id选择器

    语法: #box

    5、!import选择器

    语法: div{background-color: yellowgreen!important;}

    PS:这个语法比较特殊,在语句的值和结束符中间写

    优先级

    !import > 行间式 > id > class> 标签 > 通配

    PS:什么是行间式,行间式就是在标签的内部书写格式

    基础选择器实例

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>css基础选择器</title>
    <style>
    /*这里使用div做选择器,则会出现没有办法控制某一个标签,只要是div标签都会根据这个标签改变*/
    /*这就是标签选择器*/
    div{
    200px;
    height: 200px;
    /*border-radius这个是圆角设置*/
    border-radius: 50%;
    background-color: blue;
    }

    /*通配选择器,将所有页面中有显示效果的都会加上参数(html、body及body下的所有显示标签)*/
    *{
    /*broder边框,1px就是1像素,solid就是实线,black就是定义边框的颜色*/
    border: 1px solid black;
    }

    /*class选择器,类选择器,用 . 来标识class*/
    /*background-color优先级高于color,同时出现则background-color生效*/
    .box{
    color: hotpink;
    background-color: aquamarine;
    }

    /*id选择器(id名是唯一标识,用来唯一标识标签),用#标识id*/
    /*id名避免重名,因为在js中能识别id名,但是只会找到第一个,后面的所有重名都找不到*/
    /*id选择器的优先级比class选择器高*/
    #box{
    background-color: khaki;
    }

    /*!import选择器*/
    /*这个import优先级最高,而且js无法修改,要慎用*/
    div{
    background-color: yellowgreen!important;
    }
    </style>
    </head>
    <body>
    <div class="box">123</div>
    <!--这里采用了行间式设置了区域颜色,行间式的设置优先级大于id选择器,是最高的优先级-->
    <div class="box" id="box" style="background-color: plum">456</div>
    <div>789</div>
    </body>
    </html>
  • 相关阅读:
    codeforce1029B B. Creating the Contest(简单dp,简单版单调栈)
    spfa算法
    spfa算法
    HDU King (非连通图的差分约束,经典好题)
    HDU King (非连通图的差分约束,经典好题)
    差分约束系统相关证明(存在负环则无解证明)
    Java API 读取HDFS的单文件
    採用邻接矩阵创建图
    旧金山攻略
    一个jeecg整合activiti的学习样例,源代码下载
  • 原文地址:https://www.cnblogs.com/shizhengquan/p/10334040.html
Copyright © 2011-2022 走看看