如何編寫CSS代碼而不使用：不是選擇器？

Question

我有一個文章頁面，我正在進行小的CSS更改，例如頁邊距和字體大小。我的代碼必須能夠被Internet Explorer 8及以上版本支持。問題是，我正在使用一些IE8不支持的CSS選擇器。如何在不使用：not selector的情況下編寫我的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">中的圖像？不用：不？

另外，如何編寫CSS代碼以將文章的字體大小更改爲14px的字體大小和22px的行高？不影響上面的所有內容（不在文章部分）？

對不起，如果這是混亂，但我會澄清更多，如果需要！

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 { ... }

如果你想使用article與IE 8，一定要包括這個：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公司就像

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

此外，「類別行」看起來並不像它應該是一個段落？ 如果它是一個「行」div或跨度將更合適。 如果它除了h1之外什麼都沒有，那麼你最好把它廢棄，並且讓h1在沒有包裝的情況下在那裏。

如Chris在答覆中所說，如果您使用文章標籤（或其他任何新的html5語義標籤），請包括html5shiv。