html - 当祖先具有类 CSS (LESS) 时更改 li 的高度
问题描述
我有一个 HTML 菜单,其结构类似于:
<div class="main-menu">
<div class="block">
<ul>
<li class="title">TITLE</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
</ul>
</div>
<div class="block">
<ul>
<li class="title">TITLE</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
<li class="option">OPTION</li>
</ul>
</div>
.
.
.
</div>
外观如下:
棘手的部分是当我必须显示具有更多选项的块时(默认值为 4),为此我创建了一个更改菜单高度的类,以便它可以适应所有选项,如下所示:
我想在不更改 html 的情况下使最后一个标题下方的空间也变为灰色(它必须尊重该结构,以便其背后的 javascript 可以像使用类似组件一样工作);当主菜单具有“高”类时,我很难改变最后一个标题的高度,但我无法达到那个 li (我使用较少)来这样做。这是我在包含样式的部分中所做的(我在更重要的行上添加了注释):
.clearfix {
clear: both;
}
.card-ops-panel { // This is the main-menu
width: 600px;
height: 320px;
background-color: @white;
position: absolute;
top: 2.5rem;
z-index: 100;
box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.15), 10px 0px 20px 0 rgba(97, 112, 119, 0.15);
-webkit-box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.15), 10px 0px 20px 0 rgba(97, 112, 119, 0.15);
-moz-box-shadow: 0 10px 20px 0 rgba(97, 112, 119, 0.15), 10px 0px 20px 0 rgba(97, 112, 119, 0.15);
transition: all .6s;
&.first {
left: 0;
}
&.second {
right: -537%;
}
&.third {
right: -373%;
}
&.fourth {
right: -125%;
}
&.panel-2-col {
width: 900px;
&.second {
right: -625%;
}
}
&.panel--tall { //Class that makes the menu fit more than 4 options
height: 560px;
}
&__block {
.block {
.block__title {
padding: 30px 24px;
width: 300px;
height: 80px;
position: absolute;
float: left;
background-color: @gray-white;
&.block__title--active {
background-color: #ffffff;
color: @brand-primary;
}
&__icon {
margin-right: 10px;
line-height: .7;
}
&__text {
line-height: 0.7;
position: absolute;
top: 2.1rem;
}
}
.block__option {
background-color: #ffffff;
width: 300px;
height: 80px;
padding: 30px 24px;
position: absolute;
top: 0;
left: 300px;
.block__option__link {
&:focus {
color: @white;
background-color: @gray-dark;
}
}
&:nth-child(3) {
top: 80px;
}
&:nth-child(4) {
top: 160px;
}
&:nth-child(5) {
top: 240px;
}
&:nth-child(6) {
top: 320px;
}
&:nth-child(7) {
top: 400px;
}
&:nth-child(8) {
top: 480px;
}
}
&.block-2-col {
column-count: 2;
column-width: 300px;
column-gap: 0;
}
}
&:nth-child(2) { // section of the menu
.block {
.block__title {
top: 5rem;
}
}
}
&:nth-child(3) { // section of the menu
.block {
.block__title {
top: 10rem;
}
}
}
&:nth-child(4) { // section of the menu
.block {
.block__title { //Last title (the one I want to make bigger when the main-menu has the 'panel--tall' class
top: 15rem;
}
}
}
}
}
当主菜单有“panel--tall”类时,有什么办法可以为最后一个标题添加更多高度?如果不可能,有什么建议可以让我在相同颜色下制作空间吗?
解决方案
如果要根据 上的.panel-tall
类对最后一个元素设置不同的样式.cards-ops-panel
,可以使用如下选择器:
.card-ops-panel {
&.panel--tall &__block:nth-child(4) {
.block {
.block__title {
// Styles here...
}
}
}
}
推荐阅读
- r - 如何更改闪亮仪表板中的侧边栏 menuItem("menu1") 字体颜色?
- java - Java中的字节缓冲区到BufferedImage
- python - 在 Pygame 中,价值被计算得比预期的要多
- reactjs - 在 React Hooks 中处理常量的最佳实践
- html - 通过 cpanel.yml(通配符除外)上传子文件夹的 Bash 语法
- python - 总结python中多个函数的输出
- gis - Netlogo GIS 扩展:光栅不会修补 NetLogo 世界
- python - 在两个列表之间查找不同的项目
- python - 如何在python中发送带有scrapy或请求的if-none-match标头?
- reactjs - 如何关闭 Openlayers 自定义控件?