CSS селектор подстановочных знаков не влияет на стиль

Question

Я пытаюсь стилизовать div, используя CSS селектор подстановочных знаков.Так я и сделал div[class^="list_"].Но следующий код не работает

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class^="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

Но когда я делаю

div[class^=".box2 list_"] {
    color: red;
}

, это влияет на стиль.Насколько я понимаю, div с классом, начинающимся с list_, будет иметь этот стиль. Но я не могу понять, почему мне нужно добавить .box2 в этот селектор подстановочных знаков

Answer 1

Вы должны использовать * вместо ^.В соответствии с MDN

[attr^=value] Представляет элементы с именем атрибута attr, значение которого начинается с префикса (предшествует) значением
[attr*=value]Представляет элементы с именем атрибута attr , значение которого содержит хотя бы одно вхождение значения в строке

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

Answer 2

^= выбирает элемент с атрибутом class, который начинается с следующей строки.Вы можете использовать *= селектор, чтобы выбрать класс , который содержит :

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

---

Но я бы никогда не полагался на такую ​​конструкцию - используйте новый класс (скажем list)вместо этого, вместо этого вы можете использовать .box2.list вместо специфичность (обратите внимание, что после точки нет пробела):

$('.box2').addClass(function() {
  // your business logic determining which class to add
  return 'list';
});

.box2.list {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

Answer 3

Попробуйте *=. Который ищет совпадение в любом месте значения атрибута класса.

Ваш текущий селектор, ^=, пытается найти соответствие в начале значения атрибута класса.

См .: Селекторы атрибутов - MDN

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

Как отмечают другие в комментариях, селекторы атрибутов могут быть скользкими в зависимости от того, как они реализованы. В этом случае, как упомянул @Pointy, вы можете добавить два класса. Один для подсчета и один для отметки того, что он изменился.

Вы также можете добавить атрибут data- вместо класса. Что-то вроде data-list-count. Тогда ваш селектор будет [data-list-count].