如何解决如何在类CSS中定位输入值?
所以,人们,我有一个带过滤器的图片库,而且在定位输入值时遇到问题。 当输入单选按钮不在a中时一切正常,但是由于我添加了该类,因此无法使其正常工作。您可以在Codepen的第41行及以下行中看到“值的定向”注释,即在使用.filters类添加div之前如何定向值。现在应该如何定位/选择这些值?
Codepen: How to target input value inside a class (CSS)?
<div class="filters">
<!-- Filters -->
<input type="radio" name="categories" id="all" value="all" checked>
<input type="radio" name="categories" id="branding" value="branding">
<input type="radio" name="categories" id="graphical" value="graphical">
<input type="radio" name="categories" id="interior" value="interior">
<input type="radio" name="categories" id="illustrations" value="illustrations">
<input type="radio" name="categories" id="arts" value="arts">
<ol class="filter-items">
<li><label for="all">All</label></li>
<li><label for="branding">Branding</label></li>
<li><label for="graphical">Graphical Design</label></li>
<li><label for="interior">Interior Design</label></li>
<li><label for="illustrations">Illustrations</label></li>
<li><label for="arts">Arts</label></li>
</ol>
</div>
<!-- Gallery -->
<div class="grid-gallery">
<div class="photo">image 1</div>
<div class="photo">image 1</div>
</div>
<style>
input[type="radio"] {
display: none;
}
[value="all"]:checked ~ .grid-gallery [data-category] {
display: block;
}
<!-- Targeting of values -->
[value="branding"]:checked ~ .grid-gallery .photo:not([data-category~="branding"]),[value="graphical"]:checked ~ .grid-gallery .photo:not([data-category~="graphical"]),[value="interior"]:checked ~ .grid-gallery .photo:not([data-category~="interior"]),[value="illustrations"]:checked ~ .grid-gallery .photo:not([data-category~="illustrations"]),[value="arts"]:checked ~ .grid-gallery .photo:not([data-category~="arts"]) {
display: none;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。