Невозможно удалить текст-украшение с этикетки

Question

У меня есть следующий пример HTML:

<div class="a"> 
    <div> 
     <ul class="b"> 
      <li class="c"> 
       <input id="123" type="checkbox" checked></input> 
       <label for="123">test</label> 
      </li> 
      <li class="c"> 
       <input id="456" type="checkbox"></input> 
       <label for="456">test</label> 
      </li> 
     </ul> 
    </div> 
</div> 

И следующий CSS:

.a { 
    text-decoration: line-through; 
} 

.a .b .c input[type="checkbox"]:not(:checked) + label { 
    text-decoration: none !important; 
} 

Это может быть найдено в этом JS скрипку: https://jsfiddle.net/4q8a7yox/1/

Я хотел бы удалить линию из всех меток для непроверенных элементов. Странно то, что консоль Chrome показывает «вычисленное» текстовое украшение как «нет», но оно все еще показывает это. Все браузеры (IE10 и FF) не срабатывают аналогичным образом. Любая идея, что здесь происходит?

Answer 1

Согласно ответу this question, что это не возможно. Вы не можете удалить свойства оформления текста для дочерних узлов.

Так что лучше всего не добавлять text-decoration: line-through; к вашим .a элементам, а затем пытаться удалить их для неконтролируемых входов, но вместо этого добавьте линейный проход только для отмеченных входов.

EDIT: попробуйте это https://jsfiddle.net/b2bL8ksn/

Answer 2

Измените свой селектор от .a на label.

DEMO

label { 
    text-decoration: line-through; 
} 

EDIT:

Updated Demo

использовать больше конкретики. Перевернитесь на ярлык html. для этого примера это будет:

.a > div > .b > .c > label { 
    text-decoration: line-through; 
} 

Answer 3

Можете ли вы просто отменить css?

.a .b .c input[type="checkbox"]:checked + label { 
    text-decoration: line-through; 
} 

Answer 4

Пожалуйста, используйте этот css. Я немного изменил ваш CSS.

.a .b .c input[type=checkbox] + label { 
    text-decoration: line-through; 
    } 

    .a .b .c input[type="checkbox"]:not(:checked) + label { 
    text-decoration: inherit !important; 
    } 

Answer 5

попробовать что:

.a .c input[type="checkbox"]:checked + label { 
text-decoration: line-through; }