另一个类下的第 n 个子选择器 CSS

我在容器中有一行，在引导程序中有一行容器。我试图隐藏第一个第二个孩子班。由于某种原因，它似乎对我不起作用。我过去已经让它工作了，所以我不确定为什么它现在不起作用。我不想使用Jquery或javascript作为解决方案。我已经在下面添加了到目前为止的代码。

<!DOCTYPE html>
<html>
<head>
<style>
.rounded-image{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;  
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/*background-image: url('http://placehold.it/234x150');*/
background-size: contain; 
background-repeat: no-repeat;
height: 118px;
width:210px;
}
.rounded-image:nth-child(1){
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12  text-center global-offices">
<h1>Connect with One of Our Global Offices</h1>
</div>
<div class="col-md-3 col-xs-6 rounded-image"> </div>
<div class="col-md-3 col-xs-6 Address-lines"> 
<address>
<!-- Dublin -->
<strong>Address</strong><br>
232 <br>
10/11 e <br>
<strong><abbr title="Phone">Phone</abbr></strong> +3530<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +353
</address>
</div>


<div class="col-md-3 col-xs-6 rounded-image"> </div>
<div class="col-md-3 col-xs-6  Address-lines"> 
<address>
<!-- Italy -->
<strong>Address</strong><br>
Via Marsala I<br>
Roma<br>
<strong><abbr title="Phone">Phone</abbr></strong> +370<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +39
</address>
</div>
</div>
</div>
</body>
</html>

选择器.rounded-image:nth-child(1)实际上意味着"具有类rounded-image元素，该元素是其父级在同一时间的第一个子元素"。通常，组合选择器(如tag.class或.class:pseudo-class(意味着这些选择器的 AND 条件。

CSS 选择器级别 4 引入了:nth-child(An + B of ...)语法，它允许将"具有给定类的第一个元素"条件表示为:nth-child(1 of .rounded-image)。不幸的是，它目前只能在 Safari 中工作。

解决当前支持的CSS问题(不依赖于特定的DOM顺序(的唯一方法似乎是为遵循其他元素的所有.rounded-image元素设置特殊规则。.rounded-image元素：

.rounded-image {
display: none;
}
.rounded-image ~ .rounded-image {
display: block;
}

第一个选择器匹配所有.rounded-image元素，而第二个选择器匹配除第一个元素(前面没有其他.rounded-image元素(之外的所有.rounded-image元素。因此，只有第一个.rounded-image元素将被隐藏。

:nth-child的意思是"其父级的第n个子项"，而不是"与选择器其余部分匹配的子集中的第n个子项"。

.rounded-image:nth-child(1)匹配class="rounded-image"元素，这些元素是其父级中的第一个子元素。

<div class="col-md-3 col-xs-6 rounded-image"> </div>是其行中的第二个孩子。

CSS 没有任何机制来测试"子集中与选择器其余部分匹配的第 n 个子项"，您只能使用 JavaScript 来实现(您已排除(。

我能够像这样定位第一个：

.rounded-image:nth-child(2) {
display: none;
}

为什么？不确定

<!DOCTYPE html>
<html>
<head>
<style>
.rounded-image{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;  
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url('http://placehold.it/234x150');
background-size: contain; 
background-repeat: no-repeat;
height: 118px;
width:210px;
}
.rounded-image:nth-child(2) {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12  text-center global-offices">
<h1>Connect with One of Our Global Offices</h1>
</div>
<div class="col-md-3 col-xs-6 rounded-image"> </div>
<div class="col-md-3 col-xs-6 Address-lines"> 
<address>
<!-- Dublin -->
<strong>Address</strong><br>
232 <br>
10/11 e <br>
<strong><abbr title="Phone">Phone</abbr></strong> +3530<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +353
</address>
</div>

<div class="col-md-3 col-xs-6 rounded-image"> </div>
<div class="col-md-3 col-xs-6  Address-lines"> 
<address>
<!-- Italy -->
<strong>Address</strong><br>
Via Marsala I<br>
Roma<br>
<strong><abbr title="Phone">Phone</abbr></strong> +370<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +39
</address>
</div>
</div>
</div>
</body>
</html>

要使其正常工作，您需要将类rounded-image添加到所有同级元素中。nth-child的东西没有按照你假设的方式工作，它从它的父元素中选择所有的子元素，然后选择nth-child。这是更新的代码。试试这个。

.HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12  text-center global-offices rounded-image">
<h1>Connect with One of Our Global Offices</h1>
</div>
<div class="col-md-3 col-xs-6 rounded-image">hello</div>
<div class="col-md-3 col-xs-6 Address-lines rounded-image">
<address>
<!-- Dublin -->
<strong>Address</strong><br>
232 <br>
10/11 e <br>
<strong><abbr title="Phone">Phone</abbr></strong> +3530<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +353
</address>
</div>
<div class="col-md-3 col-xs-6 rounded-image rounded-image">hello 2</div>
<div class="col-md-3 col-xs-6  Address-lines rounded-image">
<address>
<!-- Italy -->
<strong>Address</strong><br>
Via Marsala I<br>
Roma<br>
<strong><abbr title="Phone">Phone</abbr></strong> +370<br>
<strong><abbr title="Fax">Fax:</abbr></strong> +39
</address>
</div>
</div>
</div>
</body>
</html>

.CSS

.rounded-image {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-size: contain;
background-repeat: no-repeat;
height: 118px;
width: 210px;
}
.rounded-image:nth-child(2) {
display: none;
}

相关内容

最新更新

热门标签：