用css元素週期表

所以目前我在創建一個只使用外部css文件（我不允許使用標籤）的週期表中有問題。

下面是示例：

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Periodic Table</title> 
     <link rel="stylesheet" type="text/css" href="s3372661.css"> 
    </head> 

    <body> 
     <div id="row_0"> 
      <div id="1" class="element pos_0"> <span class="number">1</span> 
       <br> <span class="symbol">H</span> 
       <br> <span class="name">Hydrogen</span> 
       <br> <span class="molar">1.00794</span> 
       <br> <span class="group"></span> 
       <br> 
      </div> 
      <div class="element pos_1"></div> 
      <div class="element pos_2"></div> 
      <div class="element pos_3"></div> 
      <div class="element pos_4"></div> 
      <div class="element pos_5"></div> 
      <div class="element pos_6"></div> 
      <div class="element pos_7"></div> 
      <div class="element pos_8"></div> 
      <div class="element pos_9"></div> 
      <div class="element pos_10"></div> 
      <div class="element pos_11"></div> 
      <div class="element pos_12"></div> 
      <div class="element pos_13"></div> 
      <div class="element pos_14"></div> 
      <div class="element pos_15"></div> 
      <div class="element pos_16"></div> 
      <div id="2" class="element pos_17"> <span class="number">2</span> 
       <br> <span class="symbol">He</span> 
       <br> <span class="name">Helium</span> 
       <br> <span class="molar">4.002602</span> 
       <br> <span class="group">Element Noble p</span> 
       <br> 
      </div> 
    </body> 
    </htmt>

和css文件：

body { 
    background-color: #FFF; 
    width:960px; 
    display:table; 
} 
div { 
    display: table-row; 
    vertical-align: inherit; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 9px; 
    border: 3px solid #FFF; 
    background-color: red; 
} 
.element { 
    text-align: center; 
    padding: 10px 5px; 
    display: table-cell; 
    vertical-align: inherit; 
    min-width: 5em; 
    border: 2px #FFF solid; 
    background-color: inherit; 
} 
.number { 
    font-size:9px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
} 
.symbol { 
    font-size:20px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
    font-weight:bold; 
} 
.name { 
    font-size:15px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
    font-style:italic; 
} 
.molar { 
    font-size:10px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
} 
.group { 
    font-size:15px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
}

的問題是如何才能讓那些不需要的模塊，而無需使用特異性針對各塊消失？

如：

#row_0 .element.pos_1 { 
    background-color: white 
}

來源

2013-07-19 Trần Trung

鏈接[小提琴]（http://jsfiddle.net/venkateshwar/sCf2P/） –

是否允許CSS3選擇？

.element:empty { 
    visibility: hidden; 
}

來源

2013-07-19 12:18:36

我想你可以使用CSS3像它下面的實現......這將隱藏DIV ......請更改屬性如果需要

div[class^=pos_]{ 
display:none !important; 
}

更新CSS對於元素類如下：刪除display: table-cell;

div {display: table-row; vertical-align: inherit; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 9px; border: 3px solid #FFF; } 
.element{text-align: center; padding: 10px 5px; vertical-align: inherit; min-width: 5em; border: 2px #FFF solid; background-color: red; }

來源

2013-07-19 11:39:18 Yogesh

如果你將其設置爲顯示：沒有，他們都將崩潰，其結果將是氫氣和氦氣會彼此相鄰，這是錯誤的。我認爲知名度：隱藏會更好 –

@JonasGrumann是的。據我所知，'可見性：隱藏'將隱藏'div'，但地點將被佔用......所以我想到了使用display：none屬性，以便這些'DIV'會更接近...同樣的事情正在發生'visibility：hidden'屬性也是因爲'div'類的屬性爲'background-color：red'，並且在'element'類中使用了相同的屬性。我更新了'DIV'和'element'類的更新答案 – Yogesh

您可以使用v可見性：隱藏。這會隱藏元素而不將它們從盒子模型中移除（因此它們仍然佔據空間）。但是你仍然會留下空的html元素。我認爲使用定位或變換或浮動的組合會更好：

div[class^=pos_]{ 
visibility: hidden; 
} 

/* and then reset visibility for the elements that need to be visible */ 
.pos_1 { 
visibility: visible; 
}

我做了這個工作解決方案的小提琴：

http://jsfiddle.net/jonigiuro/sCf2P/1/

來源

2013-07-19 11:42:49

我應用了你的代碼，但是從pos_1到pos_16的其他行也消失了，我剛剛提出的html樣本僅僅是元素週期表的第一行。但無論如何，Ilya Streltsyn的解決方案對我來說非常合適，所以感謝您的努力並祝您有愉快的一天！ –

用css元素週期表

回答

相關問題