html - 如果 DOM 中存在另一个 div,如何选择一个 div

标签 html css

<分区>

我有这个样本:

https://codepen.io/anon/pen/NwmPJa

代码 HTML:

<div class="product-info-main">
  <div class="product-add-form">
    <div class="qty">

    </div>
  </div>
</div>

<div class="product-social-links">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

代码 CSS:

.qty + .product-social-links{
      background: red;
}

为什么这段CSS代码不走? 我真的只想在 .qty div 存在时应用样式。

我如何在没有 javascript 的情况下,仅通过 CSS 做到这一点?

提前致谢!

最佳答案

您提到的 .qty + .product-social-links 代码将不起作用,因为 .qty.product 没有相同的父级-社交链接。他们应该有相同的 parent 才能工作。更好的解决方案是将父级设置为与 .product-social-links 相同级别。

参见下面的解决方案:

.product-info-main + .product-social-links {
background: red;
}

关于html - 如果 DOM 中存在另一个 div,如何选择一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47650961/

上一篇:html - 选择颜色和悬停行为的选项

下一篇:html - 页面上未加载 css 文件

相关文章:

css - Bootstrap 4 Alpha 6 Grid 不响应移动断点(col- 或 col-sm)Rails

jquery - 如何防止随机 jquery 切换?

html - 我将如何移动这个 float 的 div?

javascript - 将函数从粗体更改为下划线

javascript - 通过 Iframe 仅用一些 html 替换一次正文文本

javascript - 带悬停的 Bootstrap 下拉菜单

html - 单击 F5(刷新)时不要更改 iframe 源

firefox - CSS 媒体查询、Opera 和 Firefox 问题

javascript - 如何更改 Canvas 的 'x' 和 'y'?

css - 如何设置输入宽度以匹配占位符文本宽度