Question

我有一个包含6个元素的面板组：

.panel:nth-child(even) {
  background-color: white
}

我想让这些面板仅使用CSS替换颜色（斑马条纹），

所以我应用了这个公式：

.panel:not(.hidden):nth-child(even) {
  background-color: white
}

我的问题是我不希望这个公式应用于带有“隐藏”类（第三个div）的div ...我想“跳”这个div ......

我正在寻找类似的东西：

<?php
include '../connect_database.php'; 
if($_SERVER['REQUEST_METHOD']=='POST') {
    $username = $_POST['username'];
    $sql = "SELECT * FROM users WHERE login = '$username'";
    $result = $connect->query($sql);
    $row = $result->fetch_assoc();
    echo json_encode($row);
} else {
    echo '404 - Not Found <br/>';
    echo 'the Requested URL is not found on this server ';
}
?>

但这不起作用!! 有什么想法吗？

Answer 1

：nth-child（）伪类查看父级的子树以匹配有效子级（奇数，偶数）。因此当你将它与：not（.hidden）结合使用时，它不会正确地过滤元素。

你可以按照hashem qolami in this answer的建议做一件事：

我们可以通过CSS渐变伪造效果如下：

＆＃13;

    .hidden {display:none;}
    
    .panel-group {
      line-height: 1.2em;
      
      background-color: orange; 
      background-image: linear-gradient(transparent 50%, green 50%);
      background-size: 100% 2.4em;
    }

＆＃13;

<div class="panel-group">
    <div class="panel panel-default">
       1
    </div>

    <div class="panel panel-default">
        2
    </div>
    <div class="panel panel-default js_subscription_open hidden">
        3
    </div>

    <div class="panel panel-default">
       4
    </div>

    <div class="panel panel-default">
        5
    </div>

    <div class="panel panel-default">
        6
    </div>
</div>

＆＃13;

或者您可以使用JS删除该行。

Answer 2

.panel:not(.hidden):nth-child(even) { background: white; }

如果它在白色背景上，您可能无法注意到它的作用。隐藏的div也是一个奇数编号的孩子。

css选择器：仅对所有可见元素应用样式

2 个答案: