Question

我检查了API的某些伪选择器，例如:visible或:hidden，但很遗憾发现没有这样的选择器。由于jQuery已经支持这些选择器一段时间了，我希望它们能够实现。我的想法是，我只想在隐藏它旁边的元素时显示某个元素，但我不想使用JavaScript这样做。有什么选择吗？

Answer 1

不，这是不可能的，是不可能的，至少在样式表中是这样。

否则，你可以创建一个无限循环：

element:visible {
  display: none;
}

首先可以看到元素，然后选择器会选择并隐藏它，然后选择器就不会应用，它会再次可见，等等。

只能在像querySelector这样的JS API中允许伪类。但据我所知，没有类似的东西，它不会只是CSS。

Answer 2

这取决于你的意思＆＃34;旁边＆＃34;。您可以使用attribute-selectors按可见性选择元素。或者来自here：

CSS属性选择器根据给定属性的存在或值匹配元素。

要按可见性访问元素，您可以使用例如子字符串匹配的属性 - 选择器星[att*=val]。假设使用visibility: hidden;隐藏了div的样式：

div[style*="hidden"] {

}

现在问题是你如何访问它旁边的元素＆＃34;。如果您尝试定位的元素直接来自隐藏的元素（在同一个父元素中），请使用+选择器：

div[style*="hidden"] + span {

}

如果以前，你运气不好但可以在这个问题的答案中寻找一些解决方法： Is there a "previous sibling" CSS selector?

Answer 3

CSS本质上不能有这样的选择器。完全没有。

考虑一下：

div:not(:hidden) {
  visibility:hidden;
}

上面的定义将使div处于未确定状态 - 既不可见也不隐藏 - 在任何给定的时刻你都不能说div是否可见。

CSS有意禁止此类情况。

jQuery是另一个故事，:visible和:hidden是可行的，原因很简单：jQuery仅使用CSS选择器的语法进行查询。那里的查询不会影响元素的样式，因此您可以检索许多内容，包括元素的最终（计算）样式。

Answer 4

您所描述的功能听起来像您可以使用纯CSS标签。

以下示例来自此处：https://webdesignerhut.com/create-pure-css-tabs

＆＃13;

.tabs {
    max-width: 90%;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
    border-bottom: 4px solid #ccc;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs input[type=radio] {
    display:none;
}
.tabs label {
    display: block;
    float: left;
    width: 33.3333%;
    color: #ccc;
    font-size: 30px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    box-shadow: inset 0 4px #ccc;
    border-bottom: 4px solid #ccc;
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
    transition: all 0.5s;
}
.tabs label i {
    padding: 5px;
    margin-right: 0;
}
.tabs label:hover {
    color: #3498db;
    box-shadow: inset 0 4px #3498db;
    border-bottom: 4px solid #3498db;
}
.tab-content {
    display: none;
    width: 100%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    background-color:#ffffff;
}
.tabs [id^="tab"]:checked + label {
    background: #FFF;
    box-shadow: inset 0 4px #3498db;
    border-bottom: 4px solid #3498db;
    color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
    display: block;
}
@media (min-width: 768px) {
    .tabs i {
        padding: 5px;
        margin-right: 10px;
    }
    .tabs label span {
        display: inline-block;
    }
    .tabs {
    max-width: 750px;
    margin: 50px auto;
    }
}
/*Animation*/
.tab-content * {
    -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
    }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
    }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

＆＃13;

<div class="tabs">
    <!-- Radio button and lable for #tab-content1 -->
    <input type="radio" name="tabs" id="tab1" checked >
    <label for="tab1">
        <i class="fa fa-html5"></i><span>Tab 1</span>
    </label>
    <!-- Radio button and lable for #tab-content2 -->
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">
        <i class="fa fa-css3"></i><span>Tab 2</span>
    </label>
    <!-- Radio button and lable for #tab-content3 -->
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3">
        <i class="fa fa-code"></i><span>Tab 3</span>
    </label>
    <div id="tab-content1" class="tab-content">
        <h3>Tab 1</h3>
        <p>Lorem ipsum dolor sit amet, dignissim magna mauris integer, praesent id ut massa. Metus quis nam laoreet auctor, consectetuer nunc et penatibus nec, consequat torquent sit, vivamus commodo integer sit nec aliquam. Nulla in non, occaecat dui suspendisse, lacus ut consectetuer. Ipsum malesuada, at id, laoreet suspendisse quisque massa, nulla risus convallis mauris enim tellus nulla, in eget molestie eu dolor dolor urna. Molestie malesuada turpis auctor rutrum libero fusce.</p>
    </div>
    <div id="tab-content2" class="tab-content">
        <h3>Tab 2</h3>
        <p>Id neque ut mi condimentum numquam wisi, ut ultricies, tempus dui tellus vehicula nisl per, adipiscing nascetur lacus dolor fringilla. Maecenas purus scelerisque tempus bibendum donec eu, nam quisque mattis, montes consectetuer leo augue amet, magna nam. Wisi vestibulum bibendum. Posuere donec sed ornare arcu, quis donec turpis, nullam urna, sagittis urna pede amet. Lacus nascetur suscipit phasellus diam eget egestas, pulvinar lacus, amet mattis gravida, pede arcu praesent. Diam per felis nunc, interdum facilisi nunc tristique leo libero, amet est velit amet, wisi blandit in a adipiscing, sed mus libero. </p>
    </div>
    <div id="tab-content3" class="tab-content">
        <h3>Tab 3</h3>
        <p>Suspendisse lacus vel et aut id nonummy, libero velit, justo eu, odio phasellus mattis sapien ipsum. Suspendisse volutpat dui non proin egestas, vulputate mauris nunc amet sollicitudin, neque accumsan tincidunt, dolores viverra, aliquet metus. Beatae sed turpis, fusce nec condimentum eu lacus dolor. Elit molestie dapibus felis quisque iaculis, cum quisque lobortis ipsum vitae, lorem et ligula magna, viverra tempus vitae malesuada sapien, nec ullamcorper. Elit proident, turpis penatibus pede placerat mi laoreet augue, nullam nec. Pellentesque donec ut sed quam, fermentum ultrices ante bibendum sit, mollis viverra faucibus vestibulum pretium.</p>
    </div>
</div>

＆＃13;

Answer 5

您可以尝试.element[style*="display:hidden"]或.element[class*="hide"]（其中hide是仅设置display: hidden;的类）。似乎可以在我的设置中正常工作，但还没有尝试使用上述示例指出的使用它自行关闭的优势。

How to use pure css selector to select hidden element

我可以仅使用CSS检测元素可见性吗？

5 个答案: