zoukankan      html  css  js  c++  java
  • css选择器、权重

    基础选择器

    一、标签选择器

    p{。。。}  h1{…..}   css不区分大小写,建议小写

    1、所有的标签都可以作为标签选择器去使用

    2、无论这个标签藏多深,一定能够被选上

    3、选择页面所有的,而不是具体某一个;

    标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。 

    二、id选择器

    所有的标签都可以有id属性来标识标签。

    Id属性的值:

    1)只能是数字字母下划线,必须以字母开头 ,不能和标签同名。

    2)一个页面中不能出现相同的id,哪怕他们不是一个类型。

    具有唯一性

    id的优先级大于class

    三、类选择器

    .就是类的符号。类的英语叫做class,任何标签都可以有class属性

    1)class属性是可以重复的,2)同一个标签可以同时属于多个类选择器,切记,一个标签内不能出现两个同名属性

    1、在开发时,尽量不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。

    2、 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

    到底用id还是用class?

    答案:尽可能的用class,除非极特殊的情况可以用id。

    原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

    Css高级选择器

    一、后代选择器

    空格就表示后代,如:div1 p{}选中div1的后代所有的p。

    强调一下,选择的是后代不一定是儿子。

    后代选择器就是一种平衡:共性、特性的平衡,共性中的特性。当要设置某一部分整体样式时,可以使用后代选择器。

    后代选择器描述的是祖先结构

    二、交集选择器

    h3.special{

        color:red;

    }

    选择的元素是同时满足两个条件:必须是h3标签,然后是special。

    一般标签放在前面。交集选择器没有空格。

    三、并集选择器(分组选择器)

    用逗号表示并集。

    例:h3,li{

         color:red;

    }

    四、通配符*

    *就表示所有元素。效率不高,尽量要少用

    五、儿子选择器

    IE7开始兼容,IE6不兼容

    >号

    六、序选择器

    IE8开始兼容;IE6,7不兼容

    序选择器指first-child和last-child

    ul li:first-child{

            color:red;

            }

    ul li:last-child{

                 color:blue;   }

    七、下一个兄弟选择器

    IE7开始兼容,IE6不兼容

    +表示选择下一个兄弟

    h3+p{

          color:red;

        }

    选择上的是h3元素后面紧挨着的第一个兄弟。

    选择器可以组合使用。

    继承性

    当给自己设置样式时,自己的后代都继承上了,这个就是继承性

    哪些属性能继承?

    color、 text-开头的、line-开头的、font-开头的。

    这些关于文字样式的,都能够继承;所有关于盒子的、定位的、布局的属性都不能继承。

    继承性是从自己开始,直到最小的元素。

    层叠性

    层叠性就是css处理冲突的能力。所有的权重计算,没有任何兼容问题!

    当选择器,选择上了某个元素的时候,那么要这么统计权重:

    id的数量,类的数量,标签的数量

    百位             十位                    个位

    不进位,实际上能进位(255个标签等于一个类名)但没有实际意义!

    当权重相同时,谁在后以谁为准。

    如果不能直接选中某个元素,通过继承的,权重值为0,

    如果权重值都为0时,也就是继承来的,那么就按就近原则,谁描述的近,听谁的。             并集选择器权重要拆开计算,

    权重问题大总结:

    1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。

    2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。

    权重问题深入

    一、一个标记可以携带多个类名,标签样式并不是和类名顺序有关,而是和css样式书写顺序有关、

    二、!important标记

    1)!important是给标记属性添加权重,(无穷大)

    font-size:60px !important;

    注意:增加的属性的权重值,而不是选择器、

    2)无法提升继承的权重

    3)!important不影响就近原则

    如果大家都是继承来的,按理说应该按照“就近原则”,那么important能否影响就近原则呢?

    答案是:不影响。远的,永远是远的。不能给远的写一个important,干掉近的。

    三、权重问题总结

  • 相关阅读:
    数码管模块
    iis报mmc检测错误解决办法
    图片显示加时间戳
    C#.Net上传文件大小限制设置
    DoNet 打包,能够自动生成数据库(可以执行某些exe,vbs文件)
    aspx模式窗口
    aspx页面不能及时更新数据
    aspx 页面提交造成页面样式混乱
    MSSQL中返回刚插入记录的ID
    修改SQL数据库中表字段类型时,报“一个或多个对象访问此列”错误的解决方法
  • 原文地址:https://www.cnblogs.com/ljxblog/p/5689541.html
Copyright © 2011-2022 走看看