可以说我有以下html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
我有以下SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
现在,我遇到的问题是div options
,search
其中33%的问题account
是逻辑问题div {width: 33%}
。我知道我可以通过以下方式选择直接子元素:
header {
> div {
}
}
但是,即使我把>
所有其他类放在首位,这也无济于事。我也知道我可以说宽度应该为0或再次输入,.account
但是我想防止这种情况。
我不确定我了解你。但是我认为您希望在纯CSS中结合直接子代和子伪选择器:
或者,对于第二个div:
您还可以使用
not
选择器:排除任何不需要的div。