Fatal编程技术网
  • css/
  • css元素周期表

css元素周期表

css

css元素周期表,css,styling,Css,Styling,你好 所以，目前我只使用外部css文件创建元素周期表时遇到了一个问题（我不允许使用标签） 以下是示例： <!DOCTYPE html> <html> <head> <title>Periodic Table</title> <link rel="stylesheet" type="text/css" href="s3372661.css"> </head>

你好

所以，目前我只使用外部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>
问题是我如何使那些不需要的块消失，而不使用每个块的特殊性

例如：

#row_0 .element.pos_1 {
    background-color: white
}
我想您可以使用CSS3实现它，如下所示。。。它将隐藏
DIV
。。。如果需要，请更改属性

div[class^=pos_]{
 display:none !important;
}
元素类的更新CSS如下：删除
display:表格单元格


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



您可以使用可见性：隐藏。这将隐藏图元，而不会将其从长方体模型中移除（因此，它们仍然占用空间）。但仍然会留下空的html元素。我认为使用定位、变换或浮动组合会更好：


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

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


我对这个有效的解决方案做了一些修改：


是否允许使用CSS3选择器


.element:empty {
   visibility: hidden;
}



链接到如果你将其设置为显示：无，它们都将崩溃，结果将是氢和氦彼此相邻，这是错误的。我认为可见性：隐藏将是better@JonasGrumann对据我所知，
可见性：hidden
将隐藏
div
，但该位置将被占用。。。所以我想到了使用display:none属性，这样这些
DIV
就会更接近。。。同样的事情也发生了
visibility:hidden
属性，因为有
div
类具有属性
背景色：红色
，并且在类
元素中使用了相同的属性。我通过更新
DIV
和
element
classes更新了答案。我应用了你的代码，但从pos_1到pos_16的其他行也消失了，我刚才提供的html示例只是周期表的第一行。但不管怎样，伊利亚·斯特雷特森的解决方案对我来说效果很好，所以谢谢你的努力，祝你度过愉快的一天！

.element:empty {
   visibility: hidden;
}