CSS類和子類

除了我正在做的事情之外，是否有可能做到這一點？我希望能夠有一個類下的子類專門爲該class.subclass使用CSS。CSS類和子類

CSS

.area1 
{ 
    border:1px solid black; 
} 
.area1.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2.item 
{ 
    color:blue; 
}

HTML

<div class="area1"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 
<div class="area2"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div>

這樣我就可以使用類= 「項」下的父css類「區域1」，「區2」的元素。我知道我可以使用class =「area1 item」來讓這個工作，但我不明白爲什麼它必須如此詳細。爲了定義它，css子類不應該查看它所屬的父類嗎？

注意：這適用於IE（現在使用7），但在FF中它不會，所以我假設這不是一種CSS標準的做事方式。

來源

2009-02-17 Ryan Abbott

153

只需要添加一個空格：

.area2 .item 
{ 
    ... 
}

來源

2009-02-17 21:09:18

我不真的使用自己的子類......任何人都可以給我一個理由，這將是必要的？ – patricksweeney 2009-02-18 04:12:59

子類只是在適當的地方向CSS規則添加額外特性的另一種方法。您可以擁有一個主類，但可以根據它在文檔中的位置來更改元素的規則。 – 2009-02-18 06:28:43

你的問題似乎是在CSS的兩個類之間缺少空間：

.area1.item 
{ 
    color:red; 
}

應該

.area1 .item 
{ 
    color:red; 
}

來源

2009-02-17 21:09:43 Parrots

只需在.area1和.item之間放置一個空格，例如：

.area1 .item 
{ 
    color:red; 
}

此樣式適用於類class爲item1的元素中的元素。

來源

2009-02-17 21:09:45 M4N

你想只強制選擇兒童嗎？ http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1 
{ 
     border:1px solid black; 
} 
.area1>.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2>.item 
{ 
    color:blue; 
}

來源

2009-02-17 21:10:33 MrChrister

不是我在想什麼，但是如果我只想要直接的孩子，這是很好的信息。謝謝！ – 2009-02-17 21:20:11

只要把你的空間類

.area1 .item 
{ 
    ... 
}

之間下面是CSS Selectors一個很好的參考。

來源

2009-02-17 21:13:09 mbillard

僅供參考，當你定義一個規則是你一個人以上，具有鏈接在一起的兩個選擇：

.area1.item 
{ 
    color:red; 
}

這意味着：

應用這種風格到具有兩個一流「的任何元素區域1「和」項目「。

如：

<div class="area1 item">

可悲的是它不工作在IE6，但是這是什麼意思。

來源

2009-02-17 21:20:47

你也可以有一個元素中的兩個班這樣

<div class = "item1 item2 item3"></div>

類中的每個項目是自己的類

.item1 { 
    background-color:black; 
} 

.item2 { 
    background-color:green; 
} 

.item3 { 
    background-color:orange; 
}

來源

2009-02-18 03:47:07

這是CSS的骨幹，「連帶「在層疊樣式表。

如果你寫你的CSS規則，它可以更容易地看到結構的一行：

.area1 .item { color:red; } 
.area2 .item { color:blue; } 
.area2 .item span { font-weight:bold; }

使用多個類也是不錯的中級/高級使用CSS，可惜的是一個衆所周知的IE6漏洞編寫跨瀏覽器的代碼時，它會限制這種用法：

<div class="area1 larger"> .... </div> 

.area1 { width:200px; } 
.area1.larger { width:300px; }

IE6 忽略在多階級統治的第一選擇，所以實際上IE6應用.area1.larger規則爲

/*.area1*/.larger { ... }

這意味着它會影響所有.larger元素。

它在IE6強制，如果你想要一個乾淨的跨瀏覽器的CSS文件，你幾乎從來沒有使用CSS的該功能非常討厭的和不幸的錯誤（許多之一）。

然後解決方案是使用CSS類名的前綴，以避免碰撞室內用普通的類名：

.area1 { ... } 
.area1.area1Larger { ... } 

.area2.area2Larger { ... }

可能也只使用一個類，但這樣你可以保持你想要的邏輯CSS，而明知.area1Larger隻影響.area1等

來源

2009-02-18 13:39:29

應用上的div類可以用來作爲參考點，以時尚元素與該分區，例如。

<div class="area1"> 
    <table> 
     <tr> 
       <td class="item">Text Text Text</td> 
       <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 


.area1 { border:1px solid black; } 

.area1 td { color:red; } /* This will effect any TD within .area1 */

要超級語義，您應該將該類移動到表上。

<table class="area1"> 
     <tr> 
       <td>Text Text Text</td> 
       <td>Text Text Text</td> 
     </tr> 
    </table>

來源

2010-02-18 10:11:29

從上面kR105的答覆繼：

我的問題是相似的OP（樓主），只有發生了表外，因此子類不從的範圍內調用父類（表），但在它之外，所以我必須添加選擇器，正如kR105所提到的。

這裏是問題：我有兩個盒子（div的），每個相同的邊界半徑（HTML5），填充和利潤，反而使他們不同的顏色需要。而不是重複那些3個參數爲每種顏色類，我想要一個「超」包含邊界半徑/填充/保證金，然後只是個別「子類」，因爲他們不是真正的子類來表達自己的身邊每個差異（雙引號 - 見我以後的帖子）。下面是它如何工作的：

HTML：

<body> 
    <div class="box box1"> Hello my color is RED </div> 
    <div class="box box2"> Hello my color is BLUE </div> 
</body>

CSS：

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px} 
div.box1 {border:3px solid red; color:red} 
div.box2 {border:3px solid blue; color:blue}

希望有人認爲這很有幫助。

來源

2012-06-12 07:03:28 maximus

kR105寫道：

你也可以有一個元素中的兩個班這樣

<div class = "item1 item2 item3"></div

我不能原理看到這個值，因爲級聯樣式，最後一個優先。例如，如果在我前面的例子中，我改變了HTML閱讀

<div class="box1 box2"> Hello what is my color? </div>

框的邊框和文本將是藍色，因爲.box2的風格分配這些值。

此外，在我先前的職位我應該強調的是，加入選擇和我一樣是不一樣的創建子類中（該線程中第一個解決方案），但效果是相似的。

來源

2012-06-12 07:37:16 maximus

回答

相關問題