zoukankan      html  css  js  c++  java
  • MaintainableCSS 《可维护性 CSS》 --- ID 篇

    ID

    从语法上讲,当只有一个实例时,我们应该使用一个ID。当有多个时,我们应该使用一个 class。

    但是,ID 作用的优先级高于 class ,在我们想覆盖一个样式的时候,这就会导致问题。

    为了演示,让我们把一个 ID 元素的颜色从红色替换成蓝色。

    HTML 代码如下:

    <div id="module" class="module-override">
    

    CSS 代码:

    #module {
        color: red;
    }
    
    .module-override {
        color: blue;
    }
    

    即使覆盖 module-override 声明中设为蓝色,元素也最终也红色的。把 ID 换成 class 后,就解决了这个问题。

    <div class="module module-override">
    
    .module {
        color: red;
    }
    
    .module-override {
        color: blue;
    }
    

    现在,问题解决了。

    虽然使用 ID 进行样式定义是有问题的,但我们仍然可以在其他操作上使用。例如,使用 ID 做以下链接的时候:
    label 指向输入字段;
    URL 中的哈希片段指向到页面中的锚;
    ARIA 属性帮助屏幕阅读器用户;

    最后总结

    只要您需要启用浏览器和辅助技术的特定行为时候,可以使用ID。但是避免使用它们作为样式的钩子。

  • 相关阅读:
    设计模式总结
    centos7.5 安装python3.7
    搭建yum软件源
    centos安装gitbook
    编译技术
    samba安装
    docker命令
    shell基础知识
    随笔
    虚拟机字节码执行引擎(三)
  • 原文地址:https://www.cnblogs.com/lvyongbo/p/7110203.html
Copyright © 2011-2022 走看看