【CSS属性选择器灵活应用】以选择父元素下第一个不隐藏的class为“item“的div为例

最新推荐文章于 2023-04-07 23:23:35 发布

小太阳_@

最新推荐文章于 2023-04-07 23:23:35 发布

阅读量995

点赞数

分类专栏： css html 文章标签： css javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_42061806/article/details/126707892

版权

css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

欢迎来到我的博客

原始需求

大div下多个子div，子项会根据后端给的数据来做显示和隐藏（用display来控制），子项的边框为border:1px solid #ccc，只有第一项display不为none的项需要border-left，其余的项都需要设置border-left: none。
html代码结构：

// 大概这样子
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
  width: 100%;
  height: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap .item {
  border: 1px solid #ccc;
  width: 108px;
  height: 58px;
  line-height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>
</head>
<body>
<div class="wrap">
    <!-- 样式display:none;是由vue中v-show来控制 不固定在某条 -->
	<div class="item" style="display:none;">数据一</div>
    <div class="item">数据二</div> 
    <div class="item">数据三</div>
    <div class="item">数据四</div>
    <div class="item"  style="display:none;">数据五</div>
    <div class="item">数据六</div>
    <div class="item">数据七</div>
    <div class="item">数据八</div>
</div>
</body>
</html>

效果图如下：

解决方案

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
  width: 100%;
  height: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap .item {
  border: 1px solid #ccc;
  width: 108px;
  height: 58px;
  line-height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:not(:nth-of-type(1)) {
	border-left: none;
}

.item[style*='display:none;'] + div[class*='item'] {
	border-left: 1px solid #ccc;
}

div[class*='item'] + .item[style*='display:none;'] + div[class*='item'] {
	border-left: none;
}


</style>
</head>
<body>
<div class="wrap">
    <!-- 样式display:none;是由vue中v-show来控制 不固定在某条 -->
	<div class="item" style="display:none;">数据一</div>
    <div class="item">数据二</div> 
    <div class="item">数据三</div>
    <div class="item">数据四</div>
    <div class="item" style="display:none;">数据五</div>
    <div class="item">数据六</div>
    <div class="item">数据七</div>
    <div class="item">数据八</div>
</div>
</body>
</html>

修改记录：

.item:not(:nth-of-type(1)) { border-left: none; }，表示将父节点.wrap下的不在第一项所有子项.item的border-left设置为none。
.item[style*='display:none;'] + div[class*='item'] { border-left: 1px solid #ccc; }，表示将紧挨着display为none的一项（.wrap下第一个不为none的）设置左边框border-left。
div[class*='item'] + .item[style*='display:none;'] + div[class*='item'] { border-left: none; }，表示将中间任意一项或多项.item设置为隐藏display: none的项的border去除。