zoukankan      html  css  js  c++  java
  • CSS选择器-常用搜集

    标签选择器:

    div{

    font-size=10px;

    color=red;

    background-color=yello;

    width=200px;

    height=200px;

    }

    <div>前端威武</div>

    ---------------------------------------

    类选择器:

    .box{

    }

    <p class="box">啊啊啊啊</p>

    ------------------------------------------

    ID选择器:

    #box{

    }

    <p id="box">啊啊啊<p>

    -------------------------------------------

    通配符选择器

    *{

    }

    <div>aa</div>

    <p>aaa</p>

    ---------------------------------

    复合选择器:两个或两个以上的选择器通过不同方式连接起来

    div.box{//无空格

    color:red;

    }

    <div class="box">哎哎</div>//这个div里的box变红色 

    <p class="box">aaa<p>

    <div>aaaaaa</div>

    -------------------------------

    后代选择器:有空格    无限制隔代  

    选择器+空格+选择器.....{

    }

    .box san{

    cocor:red;

    }

    <div class="box">

    <p><span class="miss">aa</span></p>

    </div>

    ----------------------------------

    子代选择器:

    div>span{

    color;red;

    }

    <div>

    <p><span></span></p>//这里的span是孙子 这里是p>span

    <span></span> //直接的子标签变了就是这个

    ------------------------------------------------------------------------

    并集选择器:

    div,p,span{

    font-size:100px;

    }

    <div>aaa</div>

    <p>aaa</p>

    <span>aaaa</span>

    ------------------------------------

    选择器优先级:

    一、什么是css优先级
    css优先级,即是指CSS样式在浏览器中被解析的先后顺序。
    二、css优先级规则
    比较简单易记的一种方法就是给不同选择器分配不同的值:
    1.id选择器默认优先级最高,其权值为100
    2.class选择器、属性选择器和伪类选择器的权值为10
    3.标签选择器的优先级较低,其权值为1
    所以在比较样式的优先级时,只需统计选择符中的id、class、标签名个数,然后把对应的权值相加即可。根据结果便可得出优先级高低。
    1.结果较大的优先级较高
    2.结果相同,则后定义的样式优先级较高
    3.如果样式值中含有!important,则该值优先级最高 

  • 相关阅读:
    Node借住N进行升级和降级
    Token bucket
    plsql期末复习
    ssl证书参考 certbot
    浙大保研2019年上机题 7-4 Index of Popularity (30分)
    浙大保研2019年上机题 7-3 Is It An AVL Tree (25分)
    浙大保研2019年上机题 7-2 Zigzag Sequence (25分)
    浙大保研2019年上机题 7-1 Happy Numbers (20分)
    写了个shell脚本(刚装完linux可以执行一下)
    网络图指标的计算方法(软件项目管理)
  • 原文地址:https://www.cnblogs.com/hello-web/p/6830360.html
Copyright © 2011-2022 走看看