Question

我有一个带内联样式的元素，使用JavaScript设置：

public class UserDao {
    private UserDao() {}

    String findById(Long id) {
        return "foo";
    }

    private static class LazyUserDaoHolder {
        static final UserDao USER_DAO_INSTANCE = new UserDao();
    }

    public static UserDao getInstance() {
        return LazyUserDaoHolder.USER_DAO_INSTANCE;
    }
}

我被迫使用包含样式的不可更改的 CSS文件来覆盖内联样式：

<div class="foo" style="top: 30px;">

有没有办法强制元素使用CSS文件中定义的！important样式的内联样式而不是？

Answer 1

将!important放在内联样式上：

<div class="foo" style="top: 30px !important;">

Answer 2

这个问题得到了很好的回答。 Here's the link to another stack question.

首先让我说一般内联样式可以被覆盖：

.override {color:red !important;}

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

W3规范中描述了这种行为，其中声明！重要声明不会改变特异性，而是优先于“正常”声明。

话虽如此，当冲突规则都有！important标志时，特异性规定应用内联规则 - 这意味着对于OP的场景，没有办法覆盖内联！重要。

强制元素使用内联样式而不是样式表中的！important样式

2 个答案: