CSS選擇器的聲明

這是這樣一個簡單的問題，但我似乎無法找到任何地方一個確切的答案...CSS選擇器的聲明

簡單地說，可我宣佈在兩個不同的地方選擇屬性，而不覆蓋第一屬性聲明？

例如，假設我宣佈加載到頁面的CSS文件中的一個元素的屬性：

.x {margin:2px;}

然後我要聲明動態頁面中的另一個屬性：

.x {padding:2px;}

同時保持CSS文件的屬性。

雖然我明白有很多其他的方式來做到這一點，這樣做是正確的嗎？

來源

2011-03-04 Bob

這很好。你可以把聲明放在儘可能多的不同的地方，只要你喜歡。

來源

2011-03-04 13:16:59 awm

由於病情選擇之一。 – Bob 2011-03-04 13:17:35

Cheers〜'課程通常最好將相關的聲明保存在一起，但在這種情況下，似乎有一些需要動態生成，還有一些需要修復。（對嗎？） – awm 2011-03-04 13:19:38

你肯定是對的。因爲我只想改變一個特定的屬性，所以我不想每次都打印一大堆。我想我可以使用多個類，直接添加樣式等，但我只是掛在這個解決方案！ – Bob 2011-03-04 13:21:59

你可以，是的。首先，將應用頁面中包含的CSS文件中聲明的樣式，然後在頁面上指定任何其他指定的樣式。

來源

2011-03-04 13:17:17 FarligOpptreden

這將工作。由於CSS級聯，它會繼承樣式，並將它們添加到該類中。這就是爲什麼有些網站在頁面加載時發生變化。

來源

2011-03-04 13:17:57 Seth

首先，要聲明一個段落標記，你不會在它之前放一段時間。它應該是：

p {padding:2px;}

其次，CSS是層疊樣式表，因此，你可以打開一個元素聲明你想要但是很多次。其中的樣式屬性將採用最後陳述的對象。 IE：

p {padding:2px; border:1px solid #000;}

再後來

p {padding:5px;}

填充現在是5像素，但它保留了它的像素邊框。

來源

2011-03-04 13:18:59 bradenkeith

這是不好的做法！我會佔用你創建的「開關」類，這將改變一些CSS屬性，而不是dinamicaly稍後在頁面上注入它。所以後來將它添加到元素中使用它或刪除

<style> 
    .p { margin:2px; } 
    .addition { padding: 2px; } 
</style> 

<p class="p">.....</p>

切換到新的風格或者與一些Ajax調用，或者您需要什麼都jQuery的。

<p class="p addition">....</p>

要關閉填充只是刪除「添加」類或「p」類，如果你想關閉maring。

來源

2011-03-04 13:22:07

這不是一個可怕的做法。考慮在一張表中你想聲明屬性的情況，另一種你想聲明與設計有關的屬性（背景，顏色等）。 – bradenkeith 2011-03-04 13:25:52

雖然不完全相同。在你的例子中，在兩個實例中都設置了填充，所以我必須創建.addition1和.addition2 - 每個填充都有不同的填充。在頁內樣式中動態切換效率肯定更高效？ – Bob 2011-03-04 13:26:04

我並不可怕，但是不好的做法。創建例如styles_colors.css和styles_dim.css並不壞，但它可以非常方便，但我寧願堅持一個文件:) – 2011-03-04 13:41:11

級聯樣式表將繼承樣式，從規範的角度來看，您所做的完全沒錯，但可能不被認爲是最佳實踐。也請注意，如果您開始覆蓋其他樣式，則可能會應用CSS層次結構：外部>內部>內聯。

更多信息，請參閱http://nzwhost.com/article/understanding-css-hierarchy

來源

2011-03-04 13:23:01

我認爲這樣做是邏輯獨立的CSS聲明..佈局在一起，共同的顏色和具體的媒體（如屏幕，打印）在一起的最佳方式。

來源

2011-03-04 13:34:40

如果你想讓它做動態，你可以做這樣的事情：

注：這是一個PHP的例子。

<?php $back = 'image.jpg'; 
**something else can be executed ie conditionals and 
more variables can be added**) 
?> 

<html> 
<head> 
<style type="text/css"> 
btn{ 
margin:0; 
padding:0; 
background-image: <?php $back; ?> 
height:100px; 
width:200px; 
display:block; 
} 
</style> 
</head> 
<body> 
<div> 
    <div class="btn">Test text</div> 
</div> 
</body> 
</html>

您可以使用PHP將預先聲明的變量或變量組添加到CSS代碼中。請注意，CSS需要包含在您正在使用的HTML/PHP文件中。假設你想隨機產生背景顏色。 PHP數組（即'#CCC'）>隨機選擇數組中的值>將變量添加到CSS代碼中。＃

你的情況，你可以指定兩個類，然後根據您的動態代碼爲迅速回復

來源

2011-08-11 14:45:54 techspeque

CSS選擇器的聲明

回答

相關問題