Question

我发现有一种简单的方法可以计算

标签的兄弟姐妹，并返回适合于多少

兄弟姐妹的CSS样式：

ul{
	list-style-type: none;
    display: block;
}

#container{
	width: 100%;
	float: left;
	height: 100%;
	margin-left: 0;
	margin-top: 0;
}


li:first-child:nth-last-child(1) {
	height: 100%;
	background-color: red;
	width: 100%;
}

li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	height: 100%;
	background-color: blue;
	float: left;
	width: 49%;
  margin-left: 1%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
	height: 100%;
	float: left;
	background-color: red;
	width: 33.333%;
}


li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	height: 100%;
	background-color: blue;
	float: left;
	width: 24%;
  margin-left: 1%;
}

<div id="container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</div>

我想隐藏带有class =“ hidden”的

标签

我尝试过：

ul {
list-style: none;
}



li.hidden:first-child:nth-last-child(2),
li.hidden:first-child:nth-last-child(2) ~ li {
	display: none;
}

li.hidden:first-child:nth-last-child(3),
li.hidden:first-child:nth-last-child(3) ~ li {
	background-color: blue;
}

<ul>
<li class="hidden">1</li>
<li>2</li>
<li class="hidden">3</li>
<li>4</li>
</ul>

有没有一种方法可以根据类别为“ hidden”的

标签的数量，选择性地检测和更改类别为“ hidden”的

标签的CSS样式，而不会影响

没有“隐藏”类的标签？

Answer 1

我对此有点涉猎。我似乎无法使此类工作，也许有人比我更了解CSS可以理解它，但似乎nth-of-type和last-child对您要执行的操作有细微差别。

此外，无需使用类，您就可以依靠某种级别的不同DOM元素。希望这对您来说已经足够了，也可以供其他人添加，但这仍然是一个不错的开始。

当您删除一个列表项，所以只有3个时，背景颜色将在所有3个上都是蓝色。当减少到2 li时，它们消失了。 1、4或更多个li实例，它们将正常显示。

由于nth-last-child期望参数为最后一个孩子，因此通过指定nth-last-child(2)或nth-last-child(3)，您可以期望完全该元素的2或3个实例，因为这从后到前计算了子代数。

与：first-child串联时，我们正在寻找都是从末尾和第一个元素开始的第二个（或第三个）元素的任何元素。< / p>

如果满足该条件，则意味着该元素正好有2个（或3个）实例。

要使用它们之间的所有元素，请使用通用的同级组合器（〜）

要了解有关此问题的更多信息，可以查看此站点[https://alistapart.com/article/quantity-queries-for-css/]，该站点对此进行了更深入的说明，但是我在下面列出了一个基本示例。

希望有帮助！

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">

        li:nth-last-child(2):first-child, 
        li:nth-last-child(2):first-child ~ li {
            display: none;
        }

        li:nth-last-child(3):first-child, 
        li:nth-last-child(3):first-child ~ li {
            background-color: blue;
        }

    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

Answer 2

“可以使用CSS根据同级兄弟调整div大小”这个问题的解决方案不幸的是，该问题仍然悬而未决，但是由于这篇文章的观点数量众多，我觉得应该回答一个基本问题“可以根据同级来调整div的大小”。

使用jQuery我得到的答案：

$(document).ready(function(){

     var classinquestion = (".resizable");
     
     var LeftHeight = $("#left").height();
     
     var NavID = (".resizable");

     var element_count = $(classinquestion).length;
     
             if (element_count === 11) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "red" }); 
             }
             if (element_count === 10) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "blue" }); 
             }
             if (element_count === 9) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "green" }); 
             }
             if (element_count === 8) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "yellow" }); 
             }
             if (element_count === 7) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "pink" }); 
             }
             if (element_count === 6) 
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "orange" }); 
             }
             if (element_count === 5)
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "white" }); 
             }
             if (element_count === 4)
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "black" }); 
             }
             if (element_count === 3)
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "grey" }); 
             }
             if (element_count === 2)
             {
                $(NavID).css({"line-height": (LeftHeight / element_count) + "px", "background-color": "brown" }); 
             }
             if (element_count === 1)
             {
               alert("1"); 
             };

         });

#left {
  background-color: #363636;
  height: fit-content;
 }

.resizable{
	margin-left: 10%;
  margin-right: 10%;
  margin-top: 1%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="left">
     <div class="resizable">1</div>
     <div class="resizable">2</div>
     <div class="resizable">3</div>
     <div class="resizable">4</div>
     <div class="resizable">5</div>
     <div class="resizable">6</div>
     <div class="resizable">7</div>
     <div class="resizable">8</div>
     <div class="resizable">9</div>
     <div class="resizable">10</div>
     <div class="resizable">11</div>
</div>

要查看脚本的实际效果，应通过不同于Stackoverflow的“运行代码段”的方式运行代码，这是因为“结果”部分中的HTML元素会调整大小。

Answer 3

我已美化/重构了您的代码（我想，这样更清楚）-我不明白您为什么要结合使用"first-child"和"nth-last-child"。我不太了解该如何运作。
以下是关于同一主题的快速回复-为什么您不能仅从CSS中实现所需的功能。 How to get nth-child selector to skip hidden divs
因此，我的回复不完整/未能如您所愿。我认为您必须使用JQuery来实现这一点。

ul{
	list-style-type: none;
    display: block;
}

#container{
	width: 100%;
	float: left;
	height: 100%;
	margin-left: 0;
	margin-top: 0;
}

li {
  color: yellow;
  float: left;
  height: 100%;
  line-height: 50px;
  margin-left: 1%;
  text-align: center;
  width: 20%;
}

li.hidden{
  display: none;
}


li:nth-child(1) {
	background-color: green;
}

li:not(.hidden):nth-child(2){
	background-color: silver;
}

li:not(.hidden):nth-child(3){
	background-color: red;
}

li:not(.hidden):nth-child(4){
	background-color: blue;
}

<div id="container">
  <ul>
      <li>1</li>
      <li class="hidden">2</li>
      <li>3</li>
      <li class="hidden">4</li>
  </ul>
</div>

我还添加了第n个类型的版本-这里没有新内容。您应该考虑使用jQuery。

ul{
  background: #eee;
  cursor: pointer;
  display: table;
	list-style-type: none;
  padding: 10px;
  width: 80%;
}

#container{
	width: 100%;
	float: left;
	height: 100%;
	margin-left: 0;
	margin-top: 0;
}

li {
  border: 1px solid #333;
  border-radius: 4px;
  color: #333;
  float: left;
  font-weight: bold;
  height: 100%;
  line-height: 50px;
  margin-left: 1%;
  text-align: center;
  width: 20%;
}

li.hidden{
  display: none;
}

ul:hover li.hidden {display: block;}


li:nth-of-type(1):not(.hidden) {
	background-color: green;
}

li:nth-of-type(2):not(.hidden){
	background-color: silver;
}

li:nth-of-type(3):not(.hidden){
	background-color: red;
}

li:nth-of-type(4):not(.hidden){
	background-color: blue;
}

<div id="container">
  <ul>
      <li>1</li>
      <li class="hidden">2</li>
      <li>3</li>
      <li class="hidden">4</li>
  </ul>
</div>

根据特定类别的兄弟姐妹调整div的大小

3 个答案: