0

再会！

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

3 回答 3

0

You could use visibility: hidden. That would hide the elements without removing them from the box model (thus, they still occupy space). But you'll still be left with empty html elements. I think using positioning or transforms or a combination of floats would be better:

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

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

I made a fiddle of this working solution:

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

于 2013-07-19T11:42:49.060 回答
0

是否允许使用 CSS3 选择器？

.element:empty {
   visibility: hidden;
}
于 2013-07-19T12:18:36.443 回答
0

我想你可以使用 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-19T11:39:18.553 回答