代码之家 › 专栏 › 技术社区 › Sharikov Vladislav

如何从包括祖先在内的元素中获得最后一个孩子?

css-selectors css3 css

-1

Sharikov Vladislav · 技术社区 · 6 年前

我有这样的结构:

  <div class="dialogs-container">
    <div class="dialog-1">
      <div class="dialog__locker"></div>
      <div class="dialog__pane dialog__pane_pink">
        <button>Close dialog</button>
        <button>Open top dialog</button>
      </div>
    </div>
    <div class="dialog-2">
      <div class="dialog__locker"></div>
      <div class="dialog__pane dialog__pane_lightblue dialog__pane_small">
        <button>Close dialog</button>
      </div>
    </div>
  </div>

dialog__locker 上课?在我看来我不能用 :last-child 伪类,因为它只适用于一个指定的容器。我需要这样的东西 :最后一个孩子

我只想为指定背景色和不透明度 dialog-2 > dialog__locker

对话框计数不是常量。所以我不能用 dialog-2 在选择器中。

2 回复 | 直到 6 年前

Temani Afif 6 年前

.dialogs-container> :last-child .dialog__locker {
  background: red;
  height: 5px;
}

<div class="dialogs-container">
  <div class="dialog-1">
    <div class="dialog__locker"></div>
    <div class="dialog__pane dialog__pane_pink">
      <button>Close dialog</button>
      <button>Open top dialog</button>
    </div>
  </div>
  <div class="dialog-2">
    <div class="dialog__locker"></div>
    <div class="dialog__pane dialog__pane_lightblue dialog__pane_small">
      <button>Close dialog</button>
    </div>
  </div>
</div>

trk 6 年前

您也可以执行以下操作:

.dialogs-container [class|="dialog"]:last-child {
  background: red;
  height: 5px;
}

我想你一定会给你的女朋友起名的 dialog-<some-number> 嵌套在 dialogs-container

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

6 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

6 年前

Christian Luneborg · 星级评定不起作用

6 年前

Gabriel Morais · CSS未应用媒体查询

6 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

6 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

6 年前

Karos papermoon · Div和定位问题

6 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

6 年前