字體本身本身似乎使字體樣式不變

Question

在下面的代碼中，當我將font-size和font-family合並為font ，然后使用JS更改new-style類時，將行font-style: italic; 行被忽略：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Chapter 9, Example 5</title>
  <style>
    #divAdvert {
      font: 12pt Arial;
    }
    .new-style {
      text-decoration: underline;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="divAdvert">
    Here is an advertisement. Why doesn't this italicize?
  </div>
  <br><button onclick="clickMeh();">Click Meh</button>

  <script>
    function clickMeh() {
      var divAdvert = document.getElementById("divAdvert");
      divAdvert.className = "new-style";
    }
  </script>
</body>
</html>

Codepen在這里。

但是當我將它們分開時，該行將按預期斜體顯示：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Chapter 9, Example 5</title>
  <style>
    #divAdvert {
      font-size: 12pt;
      font-family: Arial;
    }
    .new-style {
      text-decoration: underline;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="divAdvert">
    Here is an advertisement.
  </div>
  <br><button onclick="clickMeh();">Click Meh</button>

  <script>
    function clickMeh() {
      var divAdvert = document.getElementById("divAdvert");
      divAdvert.className = "new-style";
    }
  </script>
</body>
</html>

Codepen在這里。

為什么？？？？？？？

更新：感謝來自Evgeny和Michael的意見，我設法通過在.new-style （在CSS中）添加#divAdvert使其簡單地工作，我認為這是最正確的答案。 這樣可以保留ID，並可以識別出new-style類完全依賴於ID的事實。 Codepen在這里。

Answer 1

這是CSS的特殊性問題。 font上#divAdvert將覆蓋由具有較低特異性的規則定義的所有字體屬性，和一類具有比一個id特異性較低。 您只需匹配或使用更高的特異性進行更改。

我可以使用一個類作為選擇器來設置#divAdvert樣式（我在下面做了什么）並追加新類而不是覆蓋它，或者可以在選擇器中使用#divAdvert.new-style而不是.new-style 。 通常，盡管這樣會遇到類似問題，但我還是盡量避免使用ID來設置樣式。

 <!DOCTYPE html> <html lang="en-US"> <head> <title>Chapter 9, Example 5</title> <style> .divAdvert { font: 12pt Arial; } .new-style { text-decoration: underline; font-style: italic; } </style> </head> <body> <div id="divAdvert" class="divAdvert"> Here is an advertisement. Why doesn't this italicize? </div> <br><button onclick="clickMeh();">Click Meh</button> <script> function clickMeh() { var divAdvert = document.getElementById("divAdvert"); divAdvert.classList.add('new-style'); } </script> </body> </html>

Answer 2

因為#ID在層次結構中比.class高，並且font本身包含其所有子屬性，所以即使您不編寫它們，它們也將被視為默認值。

您還可以使用font-style: italic !important; 在.class

字體本身本身似乎使字體樣式不變

問題描述

2 個解決方案

解決方案1
3 2017-06-27 18:07:10

解決方案2
1 2017-06-27 18:05:16

字體本身本身似乎使字體樣式不變

問題描述

2 個解決方案

解決方案1 3 2017-06-27 18:07:10

解決方案2 1 2017-06-27 18:05:16

解決方案1
3 2017-06-27 18:07:10

解決方案2
1 2017-06-27 18:05:16