当它是一个必须使用后代选择器

以下代码是利用bootstrap的HTML文件的一部分。主要是我想风格<a>其中有一个类.navbar-brand。为此我添加了另一个类.grandchildlink到<a>（不注意名字）。问题是，它不以这种方式工作..，两个选择是：当它是一个必须使用后代选择器

1.使用后代选择如。通过使用类的<body>.parentbody然后（.parentbody .grandchildlink:hover, .parentbody .grandchildlink:focus{...}）

2.添加一个id属性<a>说：grandchildlink_id然后（#grandchildlink_id:hover, #grandchildlink_id:focus {...}） ..，问题是为什么它有一个不工作类选择器？

. 
. 
. 
    <style type="text/css"> 
    .grandchildlink:hover, .grandchildlink:focus { 
    background-color: transparent; 
    color: yellow; 
    } 
    </style> 

    </head> 
    <body class="parentbody"> 
    <div class="navbar navbar-default navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle naviagation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
      <a href="#" class="grandchildlink navbar-brand" >BrandName</a> 
      <div class="navbar-collapse collapse"> 
      <ul></ul> 
      </div> 
     </div> 
    </div> 
. 
. 
.

来源

2017-05-04 Profess Physics

因为css specificity。这是CSS引导程序使用。

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover { 
    color: #fff; 
    background-color: transparent; 
}

这意味着覆盖它，你需要使用.navbar-inverse .grandchildlink {}什么用等（只要你的风格来bootstrap.css之后）或更高的特异性，就像你在你的例子上市。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
.navbar-inverse .grandchildlink:hover, .navbar-inverse .grandchildlink:focus { 
 
    background-color: transparent; 
 
    color: yellow; 
 
} 
 
</style> 
 
<body class="parentbody"> 
 
    <div class="navbar navbar-default navbar-fixed-top navbar-inverse"> 
 
    <div class="container"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle naviagation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="#" class="grandchildlink navbar-brand">BrandName</a> 
 
     <div class="navbar-collapse collapse"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div>

来源

2017-05-04 21:09:46

当它是一个必须使用后代选择器

回答

相关问题