Question

我在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;
}

但这不起作用，或许有人可以帮我解决这个问题？

Answer 1

问题是因为.ui-btn-active不是.footer所要求的>的孩子 - 它是一个孙子。删除该运算符：

.footer .ui-btn-active > .navbar-text {
    color: red !important;
}

Working example

或者，如果要使用子选择器，则需要明确设置选择器中的完整层次结构：

.footer > ul > li > .ui-btn-active > .navbar-text {
    color: red !important;
}

另请注意，应不惜一切代价避免使用!important。如果您需要覆盖设置，请使选择器更具体。

Answer 2

我喜欢：nth-child（n）选择器：

＆＃13;

a.ui-btn-active > span:nth-child(1) {
    background: red;
}

＆＃13;

当父项处于活动状态时，CSS会更改子跨度的颜色

2 个答案: