Question

我尝试设置span类的样式并且它不会改变任何东西。我无法弄清楚为什么其他一切都在起作用，而不是这个。这是我的HTML代码：

＆＃13;

.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="mainDiv">
    <div class="firstDiv">
      <img src="Images\parisImage.jpg" alt="Paris" id="parisImage">
      <p id="title">Terps Calculators Inc.</p>
      <img src="Images/pineapple.jpg" alt="pineapple" id="pineappleImage" />
    </div>
    <div class="secondDiv">
      <ul id="linkList">
        <li><a class="link" href="Http://www.google.com">www.google.com ,</a>
        </li>
        <li><a class="link" href="Http://www.hamodia.com">www.hamodia.com ,</a>
        </li>
        <li><a class="link " href="Http://www.gmail.com">www.gmail.com</a>
        </li>
      </ul>
    </div>
    <div class="thirdDiv">
      <h1 class="heading">Intoduction</h1>
      <p><span class="bold">Terps Calculators Inc.</span><span class="italic">implements and provides these<br/> calculators for     your use. We keep expanding our collection<br/> every day so make sure you stop by often.</span>
      </p>
      <h1 class="heading">Calculators</h1>
      <ul class="calculators">
        <li><a class="link2" href="GradesCalculator.html">Grades Calculator</a>
        </li>
        <li><a class="link2" href="InterestCalculator.html">Interest Calculator</a>
        </li>
      </ul>
    </div>
    <div class="fourthDiv">
      <p id="title2">Terps Calculators inc. &reg</p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

根据您提供的评论，这似乎是CSS specificity的情况。在此，您的.bold和.italic选择器不够具体，无法覆盖您的其他规则。正如MDN所说：

以下选择器类型列表是通过提高特异性来实现的：


类型选择器（例如，h1）和伪元素（例如：之前）。

类选择器（例如.example），属性选择器（例如，[type =“radio”]）和伪类（例如：hover）。

ID选择器（例如，＃example）。

网上有很多CSS specificity calculators，您可以使用它们轻松计算将应用的规则。

为什么css样式表中span类的样式不起作用？

1 个答案: