Не удалось удалить CSS-пули из списка

Я борюсь с CSS и не могу понять, как удалить пули. Да, я знаю, это звучит просто, но выслушай меня. У меня есть другой внешний файл CSS из нашего корпоративного офиса, у которого есть стили, которые мешают, и я не могу на всю жизнь понять, как их переопределить. Я пробовал важный токен, и он тоже не работает. Я использую хром, и инспектор еще не помог мне понять, что вызывает его. Во всяком случае, здесь мой код, который работает отлично автономно, но как только я помещаю в него корпоративный CSS файл, глупые пули возвращаются. Тьфу!

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

ОТВЕТЫ

Ответ 1

Это похоже на проблему с спецификацией CSS. Вы не можете "переопределять" другие стили, как таковые, вы можете просто создавать дополнительные стили, которые более конкретны. Не зная, как выглядит другой CSS, обычно есть три способа сделать это:

Встроенные стили

Точно так же, как в вашем примере. Они наиболее специфичны, поэтому они гарантированно работают, но они также гарантированно будут болью в области шеи, с которой можно работать. Как правило, если вы используете их, что-то нужно исправлять.

Добавить атрибут 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 в div с помощью набора атрибутов id.

Это то, что я обычно делаю. Это позволяет мне использовать div с ним id в моих стилях CSS, чтобы убедиться, что мои стили всегда имеют приоритет. Плюс, это означает, что мне нужно выбрать только одно значащее имя id, тогда я могу просто нарисовать остальную часть своего HTML, как обычно. Вот пример:

<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.

Ответ 2

У меня была такая же проблема, я пытался изменить CSS для веб-сайта joomla и, наконец, обнаружил, что у li было фоновое изображение, которое было пулей... (шаблон был JAT3). Это код:

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

Надеюсь, что это поможет кому-то.

Ответ 3

Убедитесь, что правило, которое вы пытаетесь переопределить, находится в UL, а не в LI. Я видел, что это правило применяется к LI, и переопределение UL, как вы уже выше, не будет иметь никакого эффекта.

Ответ 4

Моя ситуация аналогична ситуации, описанной @fankoil: мой унаследованный css имел

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

чтобы избавиться от этого для определенной ul, я дал ul id id

<ul id="foo">
...

и в css отключили фоновое изображение для этой конкретной ul

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

Итак, чтобы добавить некоторые пояснения к некоторым предыдущим ответам:

  • list-style-type находится на ul
  • background-image in on li

Ответ 5

Лучше, если вместо того, чтобы иметь встроенный стиль, вы вызываете его с помощью класса:

<ul class="noBullets">

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

Если вы не можете найти стиль, который перезаписывает ваш, вы можете использовать свойство ! important. Лучше сначала проверить свой код онлайн, используя хром или firefox Inspect element (или firebug).

EDIT:

В соответствии с вашим комментарием стиль происходит из div # wrapper ul. Вы пробовали:

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

Ответ 6

Трюк очень прост:

HTML:

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

Стиль получится так:

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

Но следующие два варианта убьют ваш разум:

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

Мы ограничиваем ширину и заставляем элемент li двигаться влево!

См. пример Awesome: http://jsfiddle.net/467ovt69/

Ответ 7

Хороший вопрос; странно, как пули отображаются в IE даже со списком: none;

Это код, который удалил пули:

/* 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;
    }
}

Ответ 8

Я думаю, что вы могли бы решить также свою проблему, обернув текст в свой элемент списка с помощью span, затем применили что-то вроде этого:

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

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

Нечетные и даже ключевые слова, которые можно использовать для соответствия дочерним элементам, чей индекс нечетный или четный, а display = none будет делать трюк, не отображая элемент перед элементом span.