如何在不使用 :not 选择器的情况下编写 CSS 代码？

Question

我有一个文章页面，我正在对其进行小的 CSS 更改，例如边距和字体大小。我的代码必须能够受 Internet Explorer 8 及更高版本的支持。问题是，我使用了一些 IE8 不支持的 CSS 选择器。如何在不使用 :not 选择器的情况下编写 CSS 代码？

示例文章页面的 HTML

<div class="entry">
  <h3 class="social-title>Share This Article </h3> 
  <div class="social-content>
    <table>
      <td><a href="twitter.com"><img class="" src="twitter.png"><span class="">Twitter</span></a></td>
      <td><a href="facebook.com"><img class="" src="facebook.png"><span class="">Twitter</span></a></td>
    </table>
  </div>

<!-- The article would start here -->
  <p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><a href="example.com/article.html"><img alt="" style="float: left;" src="example.jpg"></a>Article goes starts here...</p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
  Third paragraph
</div>

我正在使用的 CSS

.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}

img (margin: 10px)

到目前为止，如果我想为文章部分中的图像添加边距，我将如何编写 CSS 代码以便它只影响文章部分中的图像而不影响 <div class="social-content"> 中的图像?不使用 :not?

另外，我将如何编写 CSS 代码来将文章的字体大小更改为 14 像素的字体大小和 22 像素的行高？在不影响上述所有内容的情况下（不在文章部分）？

对不起，如果这令人困惑，但如果需要，我会澄清更多！

Answer 1

如果您想支持较旧的浏览器，您需要更加详细。新语法的乐趣在于我们能够更加简洁，但如果您的支持的浏览器列表中有 IE 8，您需要从设计更通用的选择器开始，然后在更精确的选择器中覆盖这些样式。

.entry p {
   font-size: 14px;
   line-height:22px;
}

.entry p.category_row {
  font-size: XXpx;
  line-height:XXpx;
}

我不知道您的文章部分从您的标记开始的位置。找出最合乎逻辑的图像容器是什么，然后用它来约束你的选择器。注意article 是一个 HTML5 元素，所以你不使用它是失职的：

<article>
  <img ... />
</article>

文章图片将使用这个简单的选择器设置样式：article img { ... }

如果您想在 IE 8 中使用 article，请务必包含以下内容：https://code.google.com/p/html5shiv/

Answer 2

为什么不将实际内容包装在它自己的div 中？

<p class="category-row">....</p>
<div class="post-content"><!--- maybe use article tag here -->
   <p>First paragraph....</p>
   <p>Second Paragraph</p>
</div>

那么你就可以引用p的like

.entry .post-content p {
     ....
}

另外，“类别行”看起来不应该是一个段落？ 如果它是“行”，则 div 或 span 会更合适。 如果它只包含 h1，则最好将其废弃，并将 h1 保留在没有包装器的情况下。

如果您使用文章标签（或任何其他新的 html5 语义标签），请包括 html5shiv，正如 Chris 在他的回答中所说的那样。