有没有一种方法可以将样式强制为已经具有style =""属性的div元素

时间:2020-03-06 14:27:19  来源:igfitidea点击:

我正在尝试对我无法控制的HTML输出进行外观设置。元素之一是具有div属性的style:" overflow:auto"。
CSS中是否有一种方法可以迫使该div使用overflow:hidden;

解决方案

据我所知,实际HTML元素上的样式会覆盖我们可以使用单独的CSS样式进行的所有操作。

但是,我们可以使用Javascript覆盖它。

我们可以在样式的末尾添加!important,如下所示:

element {
    overflow: hidden !important;
}

这通常是我们不应该依赖的,但是在情况下,这是最佳选择。更改Javascript中的值与分离标记,表示和行为(html / css / javascript)的最佳做法背道而驰。

我们是否尝试过在CSS文件中设置!important?就像是:

#mydiv { overflow: hidden !important; }

不知道这是否行得通,还没有用overflow测试过。

overflow:hidden !important

可能是?

如果div具有内联样式声明,则在不更改源代码的情况下对其进行修改的唯一方法是使用JavaScript。内联样式属性每次在CSS中都是" win"。

如下面粘贴的W3C规范所述,Magnar是正确的。似乎添加了!important关键字,以允许用户在元素级别覆盖甚至"烘焙"样式设置。由于我们处于无法控制html的情况,尽管这不是正常的设计模式,但这可能是最佳选择。

W3C CSS规格

摘抄:

6.4.2 !important rules
      CSS attempts to create a balance of power between author and user style
  sheets. By default, rules in an
  author's style sheet override those in
  a user's style sheet (see cascade rule
  3). 

However, for balance, an "!important" declaration (the keywords

  
  "!" and "important" follow the
  declaration) takes precedence over a
  normal declaration. Both author and
  user style sheets may contain
  "!important" declarations, and user
  "!important" rules override author
  "!important" rules. This CSS feature
  improves accessibility of documents by
  giving users with special requirements
  (large fonts, color combinations,
  etc.) control over presentation. 

Note. This is a semantic change since CSS1. In CSS1, author

  
  "!important" rules took precedence
  over user "!important" rules. 

Declaring a shorthand property (e.g., 'background') to be

  
  "!important" is equivalent to
  declaring all of its sub-properties to
  be "!important". 

Example(s):

The first rule in the user's style sheet in the following example

  
  contains an "!important" declaration,
  which overrides the corresponding
  declaration in the author's styles
  sheet. The second declaration will
  also win due to being marked
  "!important". However, the third rule
  in the user's style sheet is not
  "!important" and will therefore lose
  to the second rule in the author's
  style sheet (which happens to set
  style on a shorthand property). Also,
  the third author rule will lose to the
  second author rule since the second
  rule is "!important". This shows that
  "!important" declarations have a
  function also within author style
  sheets. 

/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }