通过id属性来覆盖CSS声明

Override Class Declarations by Styling ID Attributes

我们刚刚证明了浏览器读取 CSS 的顺序是从上到下,这意味着,在发生冲突时,浏览器会使用最后的 CSS 声明。

但是并非只有这些,还有其他覆盖 CSS 的方法。你还记得 id 属性吗?

让我们来覆盖你的 pink-textblue-text 两个 class,通过为 h1 元素添加 id 并设置 id 的样式,使你的 h1 元素变成 orange(橙色)。

给你的 h1 元素添加名为 orange-textid 属性。记住,id 样式看起来是这样的:

<h1 id="orange-text">

在你的 h1 元素中保留 blue-textpink-text两个 class。

在你的 style 元素中为你的 orange-text id 创建一个 CSS 声明,就像下面例子中的样子:

#brown-text {
  color: brown;
}

注意:你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的,因为 id 属性总是具有更高的优先级。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值