CSS如何覆蓋外部樣式表中的父類型？

更新：我已經嘗試了下面的建議，但我仍然面臨同樣的問題。我編輯了下面的代碼來反映新的樣式表。如果有幫助，有問題的頁面是http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/CSS如何覆蓋外部樣式表中的父類型？

在我的WordPress博客中，我試圖創建一個樣式表，其中圖像或嵌入式YouTube視頻寬度爲640px，而其下方的文本寬度僅爲600px。

WordPress的生成的HTML看起來像這樣：

<div class="entry-content"> 
    <p> 
     <a href="uploads/2011/05/ball.jpg"> 
      <img class="alignnone size-large wp-image-15139" width="640" height="211" 
       src="uploads/2011/05/ball.jpg" title="Ball" /> 
     </a> 
     This is a baseball. 
    </p> 
</div>

我的外部CSS文件有以下幾點：

.entry-content p{ 
    overflow: visible !important; 
    padding : 0px 20px 0px 20px; 
} 

.entry-content p .alignnone, iframe{ 
    overflow: visible !important; 
    width : 640px !important; 
    padding : 0px !important; 
} 

img.alignnone.size-large{ 
    overflow: visible !important; 
    width: 640px !important; 
    padding : 0px !important; 
}

然而，圖像（和文本）總是顯示在600px的，而嵌入的YouTube視頻（使用iframe標記）以640px顯示。

我以爲這是一個專一的問題，我甚至增加

style="width: 640px;"

爲IMG屬性，但沒有骰子。提前致謝。

來源

2011-05-06 Elmer

嗯，嘗試在段落中添加「overflow：visible」。 – BoltClock 2011-05-06 10:37:21

根據您的更新，我看了看問題的網頁。我想我可能會爲你解答。

檢查出你的主題是「TwentyTen」是將開始行778的樣式：

/* 
Resize images to fit the main content area. 
- Applies only to images uploaded via WordPress by targeting size-* classes. 
- Other images will be left alone. Use "size-auto" class to apply to other images. 
*/ 
img.size-auto, 
img.size-full, 
img.size-large, 
img.size-medium, 
.attachment img { 
    max-width: 100%; /* When images are too wide for containing element, force them to fit. */ 
    height: auto; /* Override height to match resized width for correct aspect ratio. */ 
}

'最大寬度：100％;'行似乎是問題。使用Firebug，我只是暫時關閉了這種風格，而日產的圖片則是全幅的。所以要解決它，你應該能夠將它添加到你自己的樣式表中：

max-width: none;

我希望這有助於！

來源

2011-05-07 20:02:40 Omninate

非常感謝你！這個伎倆。這件事我一直在絞盡腦汁。再次感謝！ – Elmer 2011-05-12 04:36:47

您在「size-large」圖像上有另一個類 - 您是否檢查過該圖像對圖像做了什麼？這種風格是否可能有一個「！重要」的聲明？

來源

2011-05-06 11:31:45 Omninate

感謝您的回覆。我已經將它添加到.css文件中，但它沒有改變行爲。請參閱上面的更新。這對於「size-large」不是問題，因爲當我刪除「entry-content p」中的填充時，所有內容都顯示爲640px。 – Elmer 2011-05-06 18:56:18

我不知道其他班級您img正在做的，但也許你可以嘗試這樣的事：

img.alignnone.size-large {width: 640px !important;}

來源

2011-05-06 11:43:03

感謝您的回覆。我已經將它添加到.css文件中，但它沒有改變行爲。請參閱上面的更新。這對其他類沒有問題，因爲當我刪除「entry-content p」中的填充時，所有內容都顯示爲640px。 – Elmer 2011-05-06 18:54:00

簡單：

.entry-content p .alignnone, iframe{ 
    width : 640px; 
}

這將採取p的子元素，並將其設置爲640px;

但是，您可能需要設置

.entry-content p{ 
overflow-x:visible 
}

來源

2011-05-06 12:12:10

感謝您的回覆。我已經將它添加到.css文件中，但它沒有改變行爲。請參閱上面的更新。 – Elmer 2011-05-06 18:53:42

，因爲有段填充，如果將寬度設置爲小於600像素，則可以使其小於640像素，因此要實現600像素寬度，需要559像素寬度。 – 2011-05-08 05:58:01

由於段落標記上的填充，圖像寬度僅爲600px。

如果你想在640像素，顯示圖像和iframe中，你可以添加以下內容：

的圖像：

img { 
    margin: 0 -20px; 
    display: block; 
}

到的iframe：

iframe { 
    margin: 0 -20px; 
}

來源

2011-05-07 20:15:03 jeroen

CSS如何覆蓋外部樣式表中的父類型？

回答

相關問題