再会!
所以目前我在仅使用外部 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
}