在另一個css類中擊中一個元素中的css類

嗨，我在用css擊中某些元素時遇到了問題。我在div中有很多div，我正在嘗試將這些元素作爲目標，以便我可以用我的CSS來設計它們。這裏是我的html：在另一個css類中擊中一個元素中的css類

<html class="ng-scope"> 
<body ng-controller="appController" class="ng-scope"> 
<div class="header ng-isolate-scope" logo="appModel.config.logoUrl" header-one="appModel.config.headerLabelOne" header-two="appModel.config.headerLabelTwo"> 
<div class="header-top"></div> 
<div class="header-bottom"></div> 
<img class="logo" ng-src="assets/images/logo.png" src="assets/images/logo.png"><div class="header-one ng-binding">WHAT PEOPLE ARE SAYING:</div><div class="header-two ng-binding">Loreal - Share Of Buzz</div> 
<img class="powered-by" src="assets/images/poweredby.png"></div> 
<!-- ngView: --> 
<div class="view-container ng-scope" ng-view=""> 
<div class="mentions ng-scope"> 

<!-- Modal --> 
<div class="modal fade ng-scope" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
      </div> 
      <div class="modal-body"> 
       <div class="mention-detail" style="width: 338px; height: 104px;"> 
        <div class="social-logo instagram-account"></div> 
        <div class="detail-image hidden" style="background-image: url('')"></div> 
        <div class="profile-info" style="left: 40px"> 
         <div class="user-info"> 
          <div class="profile-picture" style="background-image: url('http://scontent.cdninstagram.com/t51.2885-19/s150x150/13636101688972106_a.jpg')"></div> 
          <div> 
           <div class="name">Perfjrine Dlpt</div> 
           <div class="handle">@perfjrine.dpt</div></div> 
          </div> 
          <div class="tweet-stats"> 
           <span class="rank stat">SYNTHESIORANK</span> 
           <span class="synth-value value" "="">1.9</span> 
          </div> 
          <div class="tweet"> 
           <div class="tweet-inner">La douceur d'avène adoptée #avène #douceur</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script src="lib/bootstrap/js/modal.js" class="ng-scope"></script> 
</div>

我想用CSS來達到這個類是用戶的name如下：

.modal-body .mention-detail .profile-info .user-info .name { 
    color: #444444; 
    margin-top: 4px; 
}

任何人都知道爲什麼，我的做法是不工作？你能幫忙的話，我會很高興。謝謝！

來源

2016-08-22 amigo21

你怎麼知道選擇器是問題？你意識到CSS規則出現的順序很重要，對嗎？ – enhzflep

爲什麼你需要比'.name'更多？ – zzzzBov

取出'「=」「'在這一行......' 1.9' – miir

所以你的CSS看起來應該是正確的（儘管不要將多於4個選擇器嵌套在另一箇中）。你可以在CSS頁面下面進一步確定另一種相互衝突的風格（這是使用比「name」更具體的類名的一個很好的理由 - 風格名稱衝突的可能性很高）。

嘗試在Chrome開發人員工具中檢查元素 - 它會以相反的順序顯示CSS規則（因此，您的styleguide中最低的元素在Chrome中最高）。你會看到樣式是如何被覆蓋的。

另外，避免做內聯樣式 - 在網站生效或合併到其他系統後，通常比HTML更容易編輯CSS。將樣式保留在樣式表中始終是最佳做法。

來源

2016-08-22 19:47:58

如果您希望我進一步瞭解一下，請將所有的代碼放到http://codepen.io/ –

，感謝凱特，我現在就開始工作。我使用了chrome開發工具來查看它是否打中。它似乎只是如果我把代碼放入我的.css文件中。我一直在修改。減少文件之前，我想這不是編譯/反映正確。謝謝！ – amigo21

您的選擇器正在爲我工作，並正確更改.name。 HTML標記後

<head> 
    <link rel="stylesheet" href="test.css"> 
</head>

：

一種修改我所要做的就是將在CSS。

如果這不起作用，也許另一個規則是優先？

來源

2016-08-22 19:47:22

在另一個css類中擊中一個元素中的css類

回答

相關問題