子孫セレクタを使用する必要がある場合

次のコードは、ブートストラップを使用するhtmlファイルの一部です。主に私は、クラス.navbar-brandを持っている<a>をスタイルしたいと思います。そうするために別のクラス.grandchildlinkを<a>に追加しました（名前には注意しないでください）。問題は、それがこのように動作しないということです.. 二つの選択肢があった。子孫のセレクターなどを使用して子孫セレクタを使用する必要がある場合

1.。 <a>へのid属性の追加クラス、その後<body>の.parentbodyと（.parentbody .grandchildlink:hover, .parentbody .grandchildlink:focus{...}）

2.を使用して言う：（#grandchildlink_id:hover, #grandchildlink_id:focus {...}）、その後grandchildlink_idとを..質問は、なぜそれが1で動作していないですクラスセレクタ？

. 
. 
. 
    <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; 
}

、あなたはあなたの例に記載されているように、等しい（限り、あなたのスタイルがbootstrap.cssの後に来るように）またはより高い特異性と.navbar-inverse .grandchildlink {}か何かを使用する必要があります。

<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

子孫セレクタを使用する必要がある場合

答えて

関連する問題