驗證「div」。只是「。」

在我的html文件，我寫了這樣的代碼，驗證「div」。只是「。」

<body class="sign-in-body"> 
<div class="container sign-in-container"> 
    <div class="row"> 
     <div class="col"> </div> 
     <div class="col-8"> 
      <div class="card"> 
       <div class="card-block"> 
       This is some text within a card block. 
       </div> 
      </div> 
     </div> 
     <div class="col"> </div> 
    </div> 
</div>

我想一個margin-top: 15%添加到我的容器類。要做到這一點，我寫，

div.container.sign-in-container { 
    margin-top: 15%; 
}

但問題是，如果我補充一點，

.container.sign-in-container

它的工作原理。這是爲什麼？

來源

2017-09-16 Bodhi94

選擇器.container.sign-in-container將選擇具有container和sign-in-container類的任何元素。

但div.container.sign-in-container將只選擇元素與css類。

既然你只有兩個班div，無論是選擇的工作。

您應該閱讀大約css選擇器。 This是一個很好的參考開始。

來源

2017-09-16 05:35:35 Yogesh

在css中，您只需添加一個css類即可，不需要添加div.container.sign-in-container。這也適用於一類.sign-in-container。如果你想覆蓋CSS，那麼你可以使用div的父親。

來源

2017-09-16 05:25:54

您使用的是類級別的CSS選擇器。它會工作。您可以在CSS中使用多種selectors和combinators來定位頁面上的元素。

你的榜樣

div.container.sign-in-container 
div.sign-in-container 
div.container 
.container.sign-in-container 
.container 
.sign-in-container

所有要針對同一div，這就是爲什麼它的工作原理。

來源

2017-09-16 05:31:42 Amit

驗證「div」。只是「。」

回答

相關問題