Question

美好的一天！

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

Answer 1

我想你可以使用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; }

Answer 2

您可以使用visibility：hidden。这将隐藏元素而不将它们从盒子模型中移除（因此，它们仍然占据空间）。但是你仍然会留下空的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/

Answer 3

是否允许使用CSS3选择器？

.element:empty {
   visibility: hidden;
}

与css的周期表

3 个答案: