Переопределение стилей границ в CSS

У меня есть три типа коробок отображается на изображении (2,3 и 4)Переопределение стилей границ в CSS

Первый элемент является выбран стиль коробка.

Я хотел бы применить этот выбранный стиль к другим трем.

Для 2 прямолинейно. Серый цвет становится черным.
Для 3 мне нужно заменить пунктиром сплошную линию.
Для 4 я бы заменил серый на черный, но я хотел бы сохранить изображение.

Однако я пытаюсь понять, как это будет работать с наследованием в CSS. Я просто добавляю класс 'active', чтобы отметить его как выбранный. Он отлично работает на 2, но для 3 и 4 он не знает, как обрабатывать порядок имен классов. Я не могу удалить классы элементов, потому что, очевидно, я хочу каскадировать изменения (например, изображение в опции 4).

Мой CSS выглядит следующим образом:

li { 
    padding: 0.125rem; 
    margin: 0.4375rem 1.0625rem 0.3125rem 0; 
    border: 0.0625rem solid #d9d9d9; 
} 

li.active { 
    border: 0.0625rem solid black; 
} 

li.sold { 
    display: inline-block; 
    border: 1px solid #ccc; 
    background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png); 
    background-size: 100% 100%; 
} 

li.wait-list { 
    display: inline-block; 
    border: 1px dashed #ccc; 
}

я показал это в JSFiddle:

https://jsfiddle.net/561aLm4z/7/

Это, наверное, очевидный вопрос, но как я получаю «активный» стиль перезаписать стили на блоке 3 и 4?

источник

2016-03-04 Oliver Watkins

Переписать фона и границы и перемещения CSS на дно, или сделать CSS более конкретные (read more about css specifity) (добавляя ul)

add1 = false 
 
add2 = false 
 
add3 = false 
 
add4 = false 
 

 
$("#2").click(
 
    function() { 
 
    if (!add2) { 
 
     $("#2").addClass("active") 
 
     add2 = true; 
 
    } else { 
 
     $("#2").removeClass("active") 
 
     add2 = false; 
 
    } 
 
    } 
 
) 
 

 
$("#3").click(
 
    function() { 
 
    if (!add3) { 
 
     $("#3").addClass("active") 
 
     add3 = true; 
 
    } else { 
 
     $("#3").removeClass("active") 
 
     add3 = false; 
 
    } 
 
    } 
 
) 
 

 
$("#4").click(
 
    function() { 
 
    if (!add4) { 
 
     $("#4").addClass("active") 
 
     add4 = true; 
 
    } else { 
 
     $("#4").removeClass("active") 
 
     add4 = false; 
 
    } 
 
    } 
 
)

li { 
 
    padding: 0.125rem; 
 
    margin: 0.4375rem 1.0625rem 0.3125rem 0; 
 
    border: 0.0625rem solid #d9d9d9; 
 
} 
 
li.sold { 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png); 
 
    background-size: 100% 100%; 
 
} 
 
li.wait-list { 
 
    display: inline-block; 
 
    border: 1px dashed #ccc; 
 
} 
 
ul li.active { 
 
    border: 0.0625rem solid black; 
 
    background: none; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="hse-product-variant "> 
 
    <li id="1" style="display: inline-block;" class="active"> 
 
    1 
 
    </li> 
 
    <li id="2" style="display: inline-block;" class=""> 
 
    2 
 
    </li> 
 
    <li id="3" style="display: inline-block;" class="wait-list"> 
 
    3 
 
    </li> 
 
    <li id="4" style="display: inline-block;" class="sold"> 
 
    4 
 
    </li> 
 
</ul>

источник

2016-03-04 10:19:02 Nick

Я чувствую, что ваше решение нуждается в лучшем объяснении, почему это работает. – Polyducks

ОК, поэтому его * порядок * того, как я пишу свои правила, которые определяют перезапись. –

@OliverWatkins Что, и специфика – Nick

вопрос вы имеете называется ' специфичность "и лучше всего объясняется сообщением в блоге, которое обычно называется« specificity wars ».

В двух словах каждый элемент имеет значение специфичности.

элементы, как Li имеет значение 1.
классов, как .sold имеет специфичность 10.
идентификаторов, как #box имеет специфичность 100.

Объединив эти значения, вы можете переписать менее конкретные элементы.

Порядок правил также изменяет специфика. Если у вас есть два предмета с соответствующим признаком специфичности, более поздняя из них будет сиять.

Таким образом, вы можете перезаписать li.sold правило (оценка 11), добавив li.sold.selected правило (оценка 21).

Вы также можете использовать идентификаторы родительских элементов для повышения специфичности. Например:

div.man (оценка 11)

#house div.man (оценка 111)

#London #house div.man (оценка 211)

Это это основы специфики. Я также рекомендую вам прочитать статью, которая ставит концепцию в терминах StarWars, которая всегда ценится.

источник

2016-03-04 10:31:19 Polyducks

Переопределение стилей границ в CSS

ответ

Смежные вопросы