12

私はCSSと戦っていて、弾丸を削除する方法を理解できません。ええ、私はこれが簡単に聞こえることを知っていますが、私に聞いてください。私の会社のオフィスから別の外部CSSファイルがあり、スタイルが邪魔になっていて、それらをオーバーライドする方法を一生理解することができません。！importantトークンを試しましたが、どちらも機能しません。私はクロムを使用していますが、検査官はまだそれを引き起こしている原因を突き止めるのを手伝ってくれませんでした。とにかく、これがスタンドアロンでうまく機能する私のコードですが、企業のCSSファイルをそこに入れると、ばかげた弾丸が戻ってきます。うーん！

    <ul style="list-style-type:none;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
4

9 に答える 9

22

これは、 CSSの特異性に関する問題のように聞こえます。他のスタイルを「オーバーライド」することはできません。それ自体、より具体的な追加のスタイルを作成するだけです。他のCSSがどのように見えるかを知らなくても、これを行うには一般に3つの方法があります。

インラインスタイル

あなたの例とまったく同じです。これらは最も具体的であるため、動作することが保証されていますが、動作するための首の痛みも保証されています。一般的に、これらを使用している場合は、何かを修正する必要があります。

id順序付けされていないリストに属性を追加します。

次にid、CSSのセレクターとしてを使用します。セレクターとしての使用は、または要素タイプのid使用よりも具体的です。classこれは、他の場所から継承している可能性のある一連のスタイリングを切り抜けるのに便利なツールです。

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

ul#the-one {
  list-style-type: none;
}

すべてのHTMLを属性セットでラップします。divid

これは私が通常行うことです。これをCSSスタイルで使用しdivて、スタイルが常に優先されるようにすることができます。さらに、意味のある名前を1つ選択するだけで、HTMLの残りの部分を通常どおりにスタイル設定できることを意味します。次に例を示します。idid

<div id="wrapper">
  <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
  </ul>
  <p>Some text goes here</p>
</div>

div#wrapper ul {
  list-style-type: none;
}

div#wrapper p {
  text-align: center;
}

この手法を使用することは、ほとんどの時間を自分のスタイルに費やし、他の人のスタイルをデバッグしようとしないようにするための非常に良い方法です。もちろん、div#wrapperそれぞれのスタイルの先頭に置く必要がありますが、それがSASSの目的です。

于 2012-05-17T21:42:19.133 に答える
6

同じ問題が発生しました。joomlaのWebサイトのCSSを変更しようとしましたが、最終的にliに箇条書きの背景画像があることがわかりました...（テンプレートはJAT3でした）。これはコードです：

.column ul li {
  background: url(../images/bullet.gif) no-repeat 20px 7px;
  ...
}

それが誰かを助けることを願っています。

于 2012-11-26T21:08:41.357 に答える
3

オーバーライドしようとしているルールがLIではなくULにあることを確認してください。そのルールがLIに適用されるのを見てきましたが、上記のようにULをオーバーライドしても効果はありません。

于 2012-05-17T21:20:56.580 に答える
1

私の状況は@fankoilによって説明されたものと似ています：私の継承されたcssは持っていました

main-divname ul li{
  background-image:url('some-image.png');
}

特定のulについてこれを取り除くために、私はulにIDを与えました

<ul id="foo">
...

そしてcssで、この特定のulの背景画像をオフにしました

ul#foo li {
  background-image: none !important;
}

したがって、以前の回答にいくつかの説明を追加するには、次のようにします。

  • list-style-typeはulにあります
  • 背景-liの画像
于 2013-10-29T11:05:29.790 に答える
0

スタイルをインラインにする代わりに、クラスを使用して呼び出すとよいでしょう。

<ul class="noBullets">

.noBullets {
list-style-type:none !important;
}

上書きしているスタイルが見つからない場合は、！importantプロパティを使用できます。最初に、chromeまたはfirefoxのInspect要素（またはfirebug）を使用してオンラインでコードを検査することをお勧めします。

編集：

あなたのコメントによると、スタイルはdiv＃wrapperulから来ています。試しましたか：

div#wrapper ul {
list-style-type:none !important;
}
于 2012-05-17T21:32:00.180 に答える
0

トリックは非常に簡単です：

HTMLはそれを取得します：

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

スタイルはそれを取得します：

ul#the-one {list-style-type: none;}

しかし、次の2つのオプションはあなたの心を吹き飛ばします：

li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.

幅を制限し、li段落を強制的に左に移動します。

ここで素晴らしい例を参照してください：http：//jsfiddle.net/467ovt69/

于 2015-02-07T20:53:13.580 に答える
0

良い質問; list-style：noneを使用しても、IEで箇条書きがどのように表示されるかは奇妙です。

これは、箇条書きを削除したコードです。

/* media query only applies style to IE10 and IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* removes bullets in list items for IE11*/ 
    li {
        list-style-position: outside;
        overflow: hidden;
    }
}
于 2016-02-03T16:51:49.053 に答える
0

cssで次のコード行を確認してください。

.targeted-class-name>ul>li>a:before {
    content: "•";
}

それが私の場合の犯人でした

于 2018-11-16T05:48:24.967 に答える
-1

リストアイテムのテキストをスパンでラップし、次のようなものを使用することで、問題も解決できると思います。

ul>li:nth-child(odd) > span:before {
    display:none;
}

ul>li:nth-child(even) > span:before {
    display:none;
}

奇数と偶数は、インデックスが奇数または偶数である子要素を照合するために使用できるキーワードです。display= noneは、span要素の前に要素を表示しないことでトリックを実行します。

于 2016-04-17T15:06:30.053 に答える