css权重继承的理解

44 阅读2分钟

css与它的优先级、继承

CSS选择器:

    1. 标签选择器 
    2. 类选择器  class
    可以给多个标签指定相同的class名,也可以给一个标签添加多个class名。
    目的是:可以把一些标签的相同样式放在同一个 类 中,这些标签都可以调用这个公共的类,然后再调用自己独有的类。从而节省css代码,也方便统一修改样式。
    3. id选择器  唯一性
    4. 伪类选择   
      nth-child(n):先匹配序号,再匹配元素  first-child() last-child
      nth-of-type(n):先匹配元素,再匹配序号 first-of-type  last-of-type
      :link  :visited  :hover :active  'love hate'
      如果上面四个选择器出现两个或者两个以上时,要按照规定的顺序写代码
      :link 表示选择出未访问的链接
      :visited 表示选择出已经访问过的链接
      :hover 鼠标经过的链接
      :active  鼠标按下时候的链接
      :focus  表单元素获取焦点的时候
    5.复合选择器 : 
    后代选择器: 选择器 选择器
    父子选择器: 选择器>选择器
    并集选择器: 选择器,选择器
    交集选择器: 选择器选择器
    6.属性选择器 [](自己下去查阅文档)
    7.伪元素选择器 (伪元素可以当做行标签使用)
    ::before  之前 前缀
    ::after  之后 后缀

CSS 选择器优先级:

    CSS优先级:即CSS权重值,权重值大的优先级大,权重值小的优先级小。
    第一等级:
    行内样式,权重值为1000;
    如 style=""
    第二等级:
    ID选择器,权重值为100;
    如 #id=""
    第三等级:
    calss选择器 | 伪类 | 属性 选择器,权重值10;
    如 .class | :hover | []
    第四等级:
    标签选择 | 伪元素选择器,权重值1;
    如 p | ::after, ::before等等
    !important权重值是无穷的,一般把!important设置的CSS属性,权重值理解成10000

最后形成优先级顺序: !important > style属性 > #id > .class > element 注意:权重是可以相加的,内联样式与外联样式不分优先级,代码运行是从上往下走的,主要看先后顺序

CSS样式具有继承性

    判断一个元素是否具有继承性,需要测试和查看文档。

    1. 有继承性的CSS属性:
    和颜色相关的属性,如:color等
    和字体相关的属性,如:font-size, font-weight等
    和文本相关的属性,如:text-align, line-height等
    和表格相关的属性,如:caption-sideborder-collapseborder-spacingempty-cellstable-layout等
    和列表相关的属性,如:list-style-typelist-style-imagelist-style-positionlist-style

    和XXX相关的,我们慢慢积累。

    2. 无继承性的
    width, heightborder, margin, paddingdisplay显示属性等
    定位和浮动都不具有继承性。

.....有很多CSS属性不具有继承性,我们慢慢积累。

参考文章:www.cnblogs.com/guokaifeng/…