周期表与CSS(Periodic table with 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 }

Good day!

So currently I have a problem in creating a periodic table using only external css file (I'm not allowed to use tag).

Here is the sample:

<!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>

and the css file:

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; }

The problem is how can I make those unwanted block to disappear without using specificity for each block?

Such as:

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