CSS選擇器問題

-4

類內部，僞選擇器不起作用。CSS選擇器問題

 <div class="lists"> 

     <ul style="text-align:right"> 

     <li> 
     <a href="#1"> 
     HOME 
     </a> 
     </li> 

     <li> 
     <a href="#2"> 
     ABOUT US 
     </a> 
     </li> 

     <li><a href="#3"> 
     SOLUTIONS</a> 
     </li> 

     <li><a href="#5"> 
     CONTACT</a> 
     </li> 

     </ul> 

     </div> 
     </div></head> 

    <body style="margin:auto;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust: 100%;"> 
     <center> 

     <!-- NEW CONTAINER --> 
     <div class="second_c"> 
     <div class="bg_box"> 
     <h3>OPTIMIZING LEARNING EXPERIENCE</h3> 
     <p style="text-align:center">NAME 
     </p></div> 
     </div> 

     <div class="present"> 
      <h2 class="team_box">TEAM</h2> 
      <p> 
      Our team  
      </p> 
     </div> 

     <div class="team_member" > 
      <ul> 
      <li>Team Member 1</li> 
      <li>Team Member 2</li> 
      </ul> 

      <ul> 
      <li>Team Member 3</li> 
      <li>Team Member 4</li> 
      </ul> 
     </div> 

      <div class="present" > 
       <h2 class="team_box" id="2">SOLUTIONS</h2> 
        <div class="grey_box"><p><br>SMART GYAN</p></div> 
        <div class="grey_box"><p>ENTRANCE <br>SOLUTIONS</p></div> 
        <div class="grey_box"><p>DIGI <br> SOLUTIONS</p></div> 
      </div> 
     </center>

我要選擇單獨的H2，

CSS：

.present:first-child h2 
{ 
    margin-right: 600px; 
    margin-left: 600px; 
} 

.present:.present:not(:first-child) h2 
{ 
    margin-right: 500px; 
    margin-left: 500px; 
}

就像我想給第一H2，不同的屬性，另一種不同的試過的答案，但沒有工作。

來源

2014-06-10 Chetan

你使用了什麼選擇器？你可以使用.present：最後一個孩子嗎？ – joshhunt

*什麼*不起作用？唯一比描述「不工作」更糟糕的是，甚至沒有表明它不起作用。 – BoltClock

「.present：last-child」正在工作，但不是「.present：first-child」 – Chetan

可以使用第n個孩子（）財產在你的CSS。第一索引爲1

這將只適用於第一DIV.present（父容器內）：

DIV.present:nth-child(1) H2.team_box 
{ 
    ... your style ... 
}

這將僅適用於第二DIV.present（父容器內）：

DIV.present:nth-child(2) H2.team_box 
{ 
    ... your style ... 
}

來源

2014-06-10 03:32:41 hbCyber

謝謝，但我最終使用這樣的： .present：第n個孩子（2）h2.team_box { \t保證金右：600px的; \t margin-left：600px; } .present：n-child（4）h2.team_box { \t margin-right：500px; \t margin-left：500px; } – Chetan

-2

 your study click webaddress 

    http://www.w3.org/TR/CSS2/selector.html#pattern-matching 
    http://www.w3.org/TR/css3-selectors/#selectors

來源

2014-06-10 03:29:35 Kisspa

http://www.w3.org/TR/CSS2/selector.html#pattern-matching http：// www .w3.org/TR/CSS3選擇器/＃選擇 – Kisspa

您也可以使用H2標籤內的多個類，如果你想要一個更加語義的方式

<div class="present"> 
     <h2 class="team_box team_box_first">TEAM</h2> 
     <p>Our team</p> 
    </div>

來源

2014-06-10 03:34:29 jdwallace12

首先我對不好的英語感到抱歉。

<div class="present"> 
    <h2 class="team_box">TEAM1</h2> 
    <h2 class="team_box">TEAM2</h2> 
</div> 

<div class="present"> 
    <h2 class="team_box">TEAM3</h2> 
</div>

當您使用下面的代碼

：

.present H2.team_box:nth-child(1) 
{ 
    color:green; 
} 

.present H2.team_box:nth-child(2) 
{ 
    color:red; 
}

的H2色彩搭配TEAM1的價值和TEAM3是綠色的。因爲nth-child（1）是每個div中第一個具有相同類名稱的項目，而不是代碼中的第一個H2。

值爲TEAM2的H2顏色爲紅色。

來源

2014-06-10 04:45:50 hossein

CSS選擇器問題

回答

相關問題