2016-04-05 17 views
-1

私は少し間違っていますが、依然として有用な質問hereを尋ねました。それを清潔に保つために新しいものを掲示する。CSSの特異性と継承

.one li.one .twoに勝った理由を理解できたら、Item Oneはピンクの代わりに青くなりますか?特異性のルール(link)によれば、ネストされた2つのクラスは20の特異度スコアを有し、クラスおよびエレメントは11,のスコアを有するが、それに応じて勝つべきである。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .one { 
 
     color: red; 
 
    } 
 
    .one li { 
 
     color: blue; 
 
    } 
 
    .one .two { 
 
     color: pink; 
 
    } 
 
    .one .two .three { 
 
     color: purple; 
 
    } 
 
    .two { 
 
     color: green; 
 
    } 
 
    .one.two { 
 
     color: yellow; 
 
    } 
 
    .two.three { 
 
     color: grey; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="one"> 
 
    <ul class="two"> 
 
     <li>Item One</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="three two one"> 
 
    <p>TEST</p> 
 
    </div> 
 
</body> 
 

 
</html>

+1

他の質問と同じ場合。 '.one li'は' li'(それに直接つながります)で、 '.one .two'は親' ul'に色を割り当てます。継承は、 'li'自体に特別に割り当てられた色がない場合にのみ発生します。特異性の計算は、2つ以上のセレクタが同じ要素を対象とする場合にのみ適用されます。ここでは同じ要素を対象としていないため、特異性には何の役割もありません。 – Harry

+0

あなたの前の質問で受け入れられた答えは、その理由を非常にはっきりと説明しています。おそらくあなたは、あなたがその答えについて理解していなかった点についての明確化を求めるべきでしょうか? – Quentin

+0

@Quentin前のスレッドでは、この特定の質問に対処する継承については説明していません。 – Anders

答えて

0

.one .twoあなたのULピンクになります。
.one liは青色になります。

あなたはピンクのulの上にブルーのリを見ています。