我在Jquery mobile工作，我有一个这样的页脚：
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false"> <div class="footer" data-role="navbar"> <ul> <li> <a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard"> <span class="navbar-text">Dashboard</span> </a> </li> <li> <a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons"> <span class="navbar-text">Voortgang</span> </a> </li> <li> <a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons"> <span class="navbar-text">Plattegrond</span> </a> </li> <li> <a href="#" data-icon="security" id="icon-security" class="footer-icons"> <span class="navbar-text">Securitycheck</span> </a> </li> </ul> </div> </div>我希望在其父级设置为活动时更改<span class="navbar-text"></span>的颜色我想到这样的事情：
.footer > .ui-btn-active > .navbar-text { color: red!important; }但这不起作用也许有人可以帮我解决这个问题？
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false"> <div class="footer" data-role="navbar"> <ul> <li> <a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard"> <span class="navbar-text">Dashboard</span> </a> </li> <li> <a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons"> <span class="navbar-text">Voortgang</span> </a> </li> <li> <a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons"> <span class="navbar-text">Plattegrond</span> </a> </li> <li> <a href="#" data-icon="security" id="icon-security" class="footer-icons"> <span class="navbar-text">Securitycheck</span> </a> </li> </ul> </div> </div>I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text { color: red!important; }But this is not working maybe someon could help me out on this?
最满意答案
问题是因为.ui-btn-active不是.footer的孩子，因为>要求 - 它是孙子。 删除该运算符：
.footer .ui-btn-active > .navbar-text { color: red !important; }工作实例
或者，如果要使用子选择器，则需要明确设置选择器中的完整层次结构：
.footer > ul > li > .ui-btn-active > .navbar-text { color: red !important; }另请注意，应该不惜一切代价避免使用!important 。 如果需要覆盖设置，请使选择器更具体。
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text { color: red !important; }Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text { color: red !important; }Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
更多推荐
class,footer,navbar-text,<span,电脑培训,计算机培训,IT培训"/> <meta name=&
发布评论