如何选择元素的父子元素答案

【问题标题】：how to select element parent-child如何选择元素的父子元素
【发布时间】：2014-07-15 03:39:30
【问题描述】：

我有这样的结构：

<div class="home_box">
    <a href="#">
        <img alt="" src="/10829_rf-sicherheit/images/home_boxes/home1.jpg">
        <span class="box_caption" style="bottom: 0px;">
            <span class="box_title">Sicherheit</span>
            <span class="box_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor ...</span>
        </span>
    </a>
</div>

我想在链接悬停时访问 .box_text

css 中类似的东西

div.home_box a span.home_caption span.box_text {opacity:1;}

但这似乎不起作用？！

我的错误在哪里？

【问题讨论】：

不就是.home_box a:hover .box_text吗？您的 css 无法正常工作，因为您没有针对悬停状态并且您在任何地方都没有 home_caption

标签： html css css-selectors parent-child

【解决方案1】：

您需要修复不正确的类和缺少的 :hover 伪类以使其正常工作：

div.home_box a:hover span.box_caption span.box_text {
    opacity:1;
}

注意：

没有某些供应商前缀的所有浏览器都不支持不透明度。为了容纳最大数量的浏览器，您需要添加一些额外的 CSS：

div.home_box a:hover span.box_caption span.box_text {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=100);

    /* Older than Firefox 0.9 */
    -moz-opacity: 1.0;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 1.0;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 1.0;
}

来源： CSS Tricks

免责声明： 上面的 sn-p 直接来自 CSS Tricks，有两个修改。第一个修改是将他们的.transparent 选择器替换为您的选择器，以生成完整的sn-p。第二个是更改不透明度值以支持您的1 请求。

【讨论】：

现在是 2014 年。老实说，我认为这些额外属性中的任何一个都不再是必需的（即使 -ms-filter 作为例外也是值得商榷的）。如果十年前（Firefox 1.0 发布之前，WebKit 出现之前）出现的非 IE 浏览器，你还需要千辛万苦地支持，那我很同情你。

【解决方案2】：

您是否尝试过使用a:hover span.home_caption span.box_text {opacity: 1;}

现在你只是在一般情况下指定 a 标签，而不是在它被悬停时。

【讨论】：

【解决方案3】：

如果你：

div.home_box a span.box_caption span.box_text {
    opacity:1;
}

您在 CSS 中编写 home_caption，在 HTML 中编写 box_caption

【讨论】：