Question

我想更改以下protected override void OnKeyPress(KeyPressEventArgs e) { e.Handled = true; }中“记住我”复选框的文字颜色。

我目前在css中使用navbar：

id

但我想指定DOM路径，但不更改其他内联复选框颜色，所以只有这一个。如何在没有#rememberme { color: #fff; }的情况下，仅使用DOM路径来指定它？

id

Answer 1

由于你有一个独特的输入，你可以这样做，使用属性选择器[attribute="value"]和下一个兄弟选择器+，在这种情况下，它将定位{{1}这是p的直接兄弟，其属性input的值为name，它是具有类approve

的元素的子元素

navbar-form

示例代码段

＆＃13;

.navbar-form input[name="approve"] + p {
  color: red;
}

＆＃13;

.navbar-form input[name="approve"] + p {
  color: red;
}

＆＃13;

如果你改变你的标记，上面的内容很容易破解，所以给目标元素一个类会好得多

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="img/logo.png" height=30 width=41>
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a>
        </li>
        <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Menu <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Appetizers</a>
            </li>
            <li><a href="#">Main Courses</a>
            </li>
            <li><a href="#">Desserts</a>
            </li>
            <li><a href="#">Drinks</a>
            </li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Specials</li>
            <li><a href="#">Lunch Buffet</a>
            </li>
            <li><a href="#">Weekend Brunch</a>
            </li>
          </ul>
        </li>
        <li><a href="contactus.html"><i class="fa fa-envelope-o"></i> Contact</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <label class="checkbox-inline">
          <input type="checkbox" name="approve" value="">
          <p id="rememberme">Remember me</p>
        </label>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</nav>

示例代码段

＆＃13;

p.rememberme {
  color: red;
}

＆＃13;

p.rememberme {
  color: red;
}

＆＃13;

Answer 2

它应该适用于这个组合选择器：

form label:last-of-type p { color: #fff; }

如何在没有ID的情况下设置特定DOM路径的样式？

2 个答案: