**CSS**
#child:focus > #parent {
color: white;
}
**HTML**
<div id="parent">
<div id="child">
</div>
</div>
当孩子聚焦时,这是为父母应用样式的正确方法吗?
编辑:我的问题是我需要将这些样式应用于小型设备。所以我不能使用Jquery。这就是为什么我在css的媒体查询中尝试。
答案 0 :(得分:1)
您也可以使用jQuery:
$('#child:focus').parent().addClass('your_class');
答案 1 :(得分:1)
首先,您需要为div添加tabindex
属性,否则他们永远无法获得焦点。
我还包含了代码,以便在孩子失去焦点时从父级中删除CSS类。
$("#child").focusin(function() {
$(this).parent().addClass("focused");
});
$("#child").blur(function() {
$(this).parent().removeClass("focused");
});
&#13;
.focused {
background: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent" tabindex="-1">
Parent Top
<div id="child" tabindex="-1">
Child
</div>
Parent Bottom
</div>
&#13;
答案 2 :(得分:1)
CSS没有选择级别的选择器......你需要用JS解决你的问题
答案 3 :(得分:0)
使用JQuery可以非常简单地执行此操作:
$(document).ready(function(){
if ($(window).width() < 960) {
$('.child input').on('focus', function(){
$('.parent').css({
'background-color': 'blue'
});
});
$('.child input').on('blur', function(){
$('.parent').css({
'background-color': 'lightgrey'
});
});
}
});
&#13;
.parent {
width: 300px;
height: 300px;
display: block;
background: lightgrey;
}
input {
width: auto;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="parent">
<div class="child"><input type="text"></div>
</div>
&#13;
答案 4 :(得分:0)
这可以通过与4th Level selecor相同的jQuery implementation伪类来实现。
#parent:has(> #child) { /* styles to apply to the #parent */ }
答案 5 :(得分:0)
为此特殊需要的是在CSS中实现的:focus-within
伪类。在您的示例中,以下CSS将完成您尝试完成的工作。我在tabindex
上添加了#child
以使div
更具针对性。对于本机可聚焦的元素(例如,链接或表单元素)而言,这不是必需的。但是,IE和Edge不支持它。 Edge将在计划的switch to Blink rendering engine之后提供支持。
另请参阅此CSS Tricks article。
#parent {
padding: 0.25em;
background-color: crimson;
}
#parent:focus-within {
color: white;
}
<div id="parent">
<h1>Parent</h1>
<div id="child" tabindex="0">
<p>Child (click me!)</p>
</div>
</div>