Question

我有以下html结构：

<body>
    <div class="white">
        <table class="circleDataBack">
            <tr>
                <td>
                    <div class="circle">A</div>
                    <div class="circle">B</div>
                    <div class="circle marked">C</div>
                </td>
            </tr>
        </table>
    </div>
</body>

我应该只制作具有班级

的元素

marked

并使所有元素外部都不可见。拥有班级marked的元素应保存其位置并保持可见

Answer 1

使用可见性。

.circle{
  visibility: hidden;
}
.circle.marked{
  visibility: visible;
}

<body>
    <div class="white">
        <table class="circleDataBack">
            <tr>
                <td>
                    <div class="circle">A</div>
                    <div class="circle">B</div>
                    <div class="circle marked">C</div>
                </td>
            </tr>
        </table>
    </div>
</body>

Answer 2

.circle.marked {visibility:visible; }
.circle{visibility:hidden;}

<body>
    <div class="white">
        <table class="circleDataBack">
            <tr>
                <td>
                    <div class="circle">A</div>
                    <div class="circle">B</div>
                    <div class="circle marked">C</div>
                </td>
            </tr>
        </table>
    </div>
</body>

Answer 3

.circle:not(.marked){ visibility: hidden; }

<div class="white">
        <table class="circleDataBack">
            <tr>
                <td>
                    <div class="circle">A</div>
                    <div class="circle">B</div>
                    <div class="circle marked">C</div>
                </td>
            </tr>
        </table>
    </div>

Answer 4

https://jsfiddle.net/0emw0kL6/ 这是简单的css属性，可以帮助你。

<!-- CSS STARTS-->
.circle{
  display:none;
}
.marked{
  display:block;
}
<!-- CSS STARTS-->
<!-- HTML STARTS-->
<body>
    <div class="white">
        <table class="circleDataBack">
            <tr>
                <td>
                    <div class="circle">A</div>
                    <div class="circle">B</div>
                    <div class="circle marked">C</div>
                </td>
            </tr>
        </table>
    </div>
</body>
<!-- HTML ENDS-->

使外部元素不可见，html css

4 个答案: