1. ホーム
  2. 質問と答え
  3. n番目の子セレクタは、HTML要素のスタイルに

n番目の子セレクタは、HTML要素のスタイルに

2016-04-17 16 views
2

n番目の子セレクタは、HTML要素のスタイルに

/* Core style */ 
 

 
#preview #icon { 
 
    display:block; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
    width:250px; 
 
    height:250px; 
 
    cursor:pointer; 
 
} 
 
.donut { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    -webkit-transition: all 500ms; 
 
    -moz-transition: all 500ms; 
 
    -o-transition: all 500ms; 
 
    transition: all 500ms; 
 
} 
 
.donut i { 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    background: #000000; 
 
    -webkit-transition: all 500ms; 
 
    -moz-transition: all 500ms; 
 
    -o-transition: all 500ms; 
 
    transition: all 500ms; 
 
} 
 

 

 
/* Circle O Times icon */ 
 
.donut.circle-o-times i { 
 
    border-radius: 0%; 
 
    -webkit-transform: rotate(45deg) scale(0.5, 0.125); 
 
    -moz-transform: rotate(45deg) scale(0.5, 0.125); 
 
    -ms-transform: rotate(45deg) scale(0.5, 0.125); 
 
    -o-transform: rotate(45deg) scale(0.5, 0.125); 
 
    transform: rotate(45deg) scale(0.5, 0.125); 
 
} 
 
.donut.circle-o-times i:nth-child(1) { 
 
    border-radius: 50%; 
 
    -webkit-transform: scale(0.8); 
 
    -moz-transform: scale(0.8); 
 
    -ms-transform: scale(0.8); 
 
    -o-transform: scale(0.8); 
 
    transform: scale(0.8); 
 
} 
 
.donut.circle-o-times i:nth-child(2) { 
 
    border-radius: 50%; 
 
    -webkit-transform: scale(0.65); 
 
    -moz-transform: scale(0.65); 
 
    -ms-transform: scale(0.65); 
 
    -o-transform: scale(0.65); 
 
    transform: scale(0.65); 
 
} 
 
.donut.circle-o-times i:nth-child(3) { 
 
    border-radius: 0%; 
 
    -webkit-transform: rotate(-45deg) scale(0.5, 0.125); 
 
    -moz-transform: rotate(-45deg) scale(0.5, 0.125); 
 
    -ms-transform: rotate(-45deg) scale(0.5, 0.125); 
 
    -o-transform: rotate(-45deg) scale(0.5, 0.125); 
 
    transform: rotate(-45deg) scale(0.5, 0.125); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div id="preview"> 
 
    <i id="icon" class=" donut circle-o-times "> 
 
    <i style="background-color:#FF6600"></i> 
 
    <i style="background-color:rgb(255, 255, 255)"></i> 
 
    <i style="background-color:#FF6600"></i> 
 
    <i style="background-color:#FF6600"></i> 
 
    </i> 
 
    </div> 
 
</body> 
 

 
</html>

をオーバーライドしていない私は色のスタイルを削除しようとしているフォームのHTML属性と私はアイコン

をアニメーション化する前に、CSSに移動CSSのnth-childsでbackground-colorを指定し、htmlスタイルを削除すると、何ももう機能しません。

どこが間違っていますか？

出典

2016-04-17 mick

+1

のためにあなたがいないだために変更された（ない-作業）バージョンです。 n番目の子にインラインHTMLスタイルをオーバーライドするセレクタ、私が見ることができるのは、ボーダの半径と変換ですが、htmlは背景色です....オーバーライドは起こらないはずです... –

+0

問題を示すスニペットを投稿できますか？また、「もう何も働かない」とは、いくらかの細かいことでできます。 –

+0

上記のコードは、元の設定を示しています。 4つのhtmlスタイルの属性（4つの "circle-o-times" CSS要素を色付けする）を削除し、対応するcss要素で背景色を指定すると、アイコンが崩壊します。 – mick

答えて

0

htmlタグで宣言されているスタイルを上書きすることはできません。 CSSをオーバーライドする場合は、クラスにbackground-color:#FF6600を追加してから、nth-childを使用してオーバーライドする必要があります。 例えば

<div id="preview"> 
<i id="icon" class=" donut circle-o-times "> 
     <i class="differentclass"></i> 
</i> 
</div>

CSSここ

.differentclass{ 
    background-color:#FF6600; 
} 
.donut.circle-o-times i:nth-child(1) { 
    background-color:#FFFFFF; 
}

出典

2016-04-17 09:55:28

+0

OPはhtmlのスタイルを削除すると（それはスタイル属性を意味すると推測します）、何ももう機能しません。 –

+0

しかし、彼は明らかに '私はCSSのnth-childsの背景色を指定し、htmlスタイルを削除するともう何も動作しません。 どこが間違っていますか？' –

+0

また、 '！important'は最後の手段としてのみ使用されるべきであることを強調してください（htmlスタイルの属性を削除できない場合に備えて）。 –

0

がHTML

<div id="preview"> 
<i id="icon" class=" donut circle-o-times "></i> 
</div>

とCSS

#preview #icon { 
display:block; 
margin: 0 auto; 
margin-top: 250px; 
width:250px; 
height:250px; 
cursor:pointer; 
} 
.donut { 
position: relative; 
display: inline-block; 
vertical-align: bottom; 
-webkit-transition: all 500ms; 
-moz-transition: all 500ms; 
-o-transition: all 500ms; 
transition: all 500ms; 
} 
.donut i { 
position: absolute; 
display: block; 
width: 100%; 
height: 100%; 
opacity: 1; 
background: #000000; 
-webkit-transition: all 500ms; 
-moz-transition: all 500ms; 
-o-transition: all 500ms; 
transition: all 500ms; 
} 
.donut.circle-o-times i { 
border-radius: 0%; 
background-color:#FF6600; 
-webkit-transform: rotate(45deg) scale(0.5, 0.125); 
-moz-transform: rotate(45deg) scale(0.5, 0.125); 
-ms-transform: rotate(45deg) scale(0.5, 0.125); 
-o-transform: rotate(45deg) scale(0.5, 0.125); 
transform: rotate(45deg) scale(0.5, 0.125); 
} 
.donut.circle-o-times i:nth-child(1) { 
border-radius: 50%; 
background-color:#FFF; 
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 
} 
.donut.circle-o-times i:nth-child(2) { 
border-radius: 50%; 
background-color:#FF6600; 
-webkit-transform: scale(0.65); 
-moz-transform: scale(0.65); 
-ms-transform: scale(0.65); 
-o-transform: scale(0.65); 
transform: scale(0.65); 
} 
.donut.circle-o-times i:nth-child(3) { 
border-radius: 0%; 
background-color:#FF6600; 
-webkit-transform: rotate(-45deg) scale(0.5, 0.125); 
-moz-transform: rotate(-45deg) scale(0.5, 0.125); 
-ms-transform: rotate(-45deg) scale(0.5, 0.125); 
-o-transform: rotate(-45deg) scale(0.5, 0.125); 
transform: rotate(-45deg) scale(0.5, 0.125); 
}

出典

2016-04-17 16:56:14 mick

関連する問題

 関連する問題