web-dev-qa-db-ja.com

#id ul liの動作をクラス定義でオーバーライドできますか

#idで識別されるエリアがあり、次のようなCSSがあります。

#id ul li {
    margin:0;
}

その領域の特定のULについて、マージン設定を上書きできますか？ #idがフォーマットの評価において非常に高い優先度を生み出すことを理解しています。

私が試してみました：

.myclass ul li {
    margin-left: 20px;
}

そして

#id ul.myclass {

と同様

#id li.myclass {

可能ですか？

csscss-selectors
18
thoni56

SWilkに同意します。可能な場合は!importantを避けてください（ここでも可能です）。 SWilkが提供しなかった他のいくつかのソリューションは次のとおりです。

#id ul.myclass li {

または...

#id ul li.myclass {

重要なのは、上記とSWilkのソリューションが行うセレクターの特異性を高めることです。元のソリューションが機能しなかった理由は、他のタグ（ulまたはli）も#idも含めず、.myclassを追加したためです。

構造を示したコメントの後に追加：

あなたのhtmlがこれである場合（コメントで述べたとおり）：

<div id="ja-col2">
  <div>.... 
    <ul class="latestnews">
      <li class="latestnews">

そしてあなたの現在のCSSは（別のコメントで述べられているように）です：

#ja-col1 ul li, 
  #ja-col2 ul li { 
    margin:0; padding-left:15px; 
  } 
#ja-col2 .latestnews ul li, /*does not exist*/
  .latestnews #ja-col2 ul li, /*does not exist*/
  .latestnews ul li, /*does not exist*/
  ul.latestnews li.latestnews { 
     list-style:disc outside url("../images/bullet.gif"); 
     margin-left:15px; padding-left:15px; 
  } 
ul li { line-height:180%; margin-left:30px; }

変更が表示されない理由は、3つのセレクターパスがHTML構造に存在せず、特異性の高いものが最初のグループであるためです。必要なもの：

#ja-col2 ul.latestnews li

#ja-col2 ul liをオーバーライドします。

21
ScottS
.myclass ul li {
    margin-left: 20px !important;
}

トリックを行う必要があります:)

5
HurnsMobile

！importantの使用は避けてください。これはデバッグが困難であり、他のセレクターと干渉する可能性が非常に高いです。特に、今から数か月後にCSSを変更しようとすると、どこかに！Important句があったことを忘れてしまいます。

以前のものよりも具体的なセレクタを配置する必要があります。 1つのセレクタでクラスとIDの部分を使用するだけです。

どちらかを使用してみてください

#id .myclass ul li {
    margin-left: 20px;
}

または

.myclass #id  ul li {
    margin-left: 20px;
}

「myclass」クラスの要素がDOMツリーのどこにあるかに応じて-#id要素の親である場合は最初の例を使用し、それ以外の場合は2番目の例を使用します。 #id要素から独立したい場合は、次を使用してみてください：

#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
    margin-left: 20px;
}

これは.myclass要素内のul内のすべてのliに対して機能し、ツリー内に#id要素が存在するかどうかは関係ありません。

よろしく、SWilk

2
SWilk

疑似偽物を使用する：IDではない

_.myclass:not(#f) ul li {
    margin-left: 20px;
}
_
_#hello .hello-in{
  color:red;
}

.hello-in:not(#f){
  color:blue;
}_
_<div id="hello">
  <div class="hello-in">
   Hello I am red
  </div>
</div>_

:not(#♥)または任意のhtml4/5（ページタイプによって異なります）文字を使用することもできます

0
Benn

http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override

ユーザーがスタイルを確実に制御できるようにするために、CSS2はCSS1で定義された「！important」演算子のセマンティクスを変更します。 CSS1では、作者は常にスタイルについて最終的な発言権を持っていました。 CSS2では、ユーザーのスタイルシートに「！important」が含まれている場合、作成者のスタイルシートの適用可能なルールよりも優先されます。これは、特定の色の組み合わせやコントラストを必要とする、または避けなければならないユーザー、大きなフォントを必要とするユーザーなどにとって重要な機能です。たとえば、次のルールは段落テキストに大きなフォントサイズを指定し、同じ太さの作成者ルールを上書きします。

P { font-size: 24pt ! important }
0
Gavrisimo