Селектор атрибутов CSS не работает

Question

Я пытаюсь выбрать абзац красного цвета и применить к нему границу. Почему этот кусок кода не работает?

p[color="red"] { 
 
     border: 1px solid black; 
 
}

<p style="color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: lime;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: darkgray;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: cyan;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p style="color: indigo;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>

ли я что-то отсутствует?

скрипку: https://jsfiddle.net/kLx1gcq0/

Answer 1

[] является селектор атрибута, поэтому вы должны выбрать атрибут style как:

p[style*="color: red"] { 
    border: 1px solid black; 
} 

JSFiddle Demo
*= выбирает элемент, если атрибут содержит строку, указанную. Отличная статья о CSS-селекторах может быть be found here.

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

p[style*="color: red"], 
p[style*="color:red"] { 
    border: 1px solid black; 
} 

Answer 2

Селектор p[color="red"] не работает, потому что элемент не имеет атрибута color. Так как вы пытаетесь соответствовать на основе атрибута style, ваш селектор может быть:

Example Here

p[style="color: red;"] { 
    border: 1px solid black; 
} 

Тем не менее, стоит отметить, что это будет соответствовать значение атрибута точно, так что, вероятно, вона Не работайте все время. Вы могли бы матч на основе того, содержит ли значение color: red:

p[style*="color: red"] { 
    border: 1px solid black; 
} 

Однако, это может не сработать, если пробельные изменяется или если значение background-color: red. Конечно, вы могли бы выбрать все разные варианты, но если вы можете, я бы настоятельно предложил избежать использования селектора атрибутов, подобного этому. Классы лучше подходят для такого рода вещей.

Answer 3

Селекторы атрибутов предназначены для идентификации атрибутов HTML, а не свойств CSS. Следующее может работать, однако (непроверенные):

p[style*="color: red;"] { 
 
    border: 1px solid black; 
 
}

<p style="color: green;">Green text</p> 
 
<p style="color: yellow;">Yellow text</p> 
 
<p style="color: lime;">Lime text</p> 
 
<p style="color: darkgray;">Dark gray text</p> 
 
<p style="color: red;">Red text</p> 
 
<p style="color: cyan;">Cyan text</p> 
 
<p style="color: indigo;">Indigo text</p>

Answer 4

селектор является неправильным. p [color = "red"] означает «элемент P, который имеет атрибут« цвет »со значением« красный »... но у вас есть атрибут« стиль », а не« цвет ».

Посмотрите в CSS селекторы:.. http://www.w3.org/TR/css3-selectors/#selectors

Answer 5

это не работает, так как цвета не атрибут HTML, который является то, что [color=...] матчей против

в общем, встроенном стиле осуждается Вы должны использовать CSS для укладки и общепринятой практикой является использование классов.

Попробуйте вместо этого:

p.red { 
 
     color: red; 
 
     border: 1px solid black; 
 
} 
 
p.green { 
 
     color: green; 
 
} 
 
p.yellow { 
 
     color: yellow; 
 
} 
 
p.lime { 
 
     color: lime; 
 
}

<p class="green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p class="lime">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p> 
 
<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>

Answer 6

Да, так просто ошибка. Очевидно, что цвет не является атрибутом html.

Рабочие растворы:

p[style*="color"][style*="red"] { 
    border: 1px solid black; 
} 

p[style*="color: red"], 
p[style*="color:red"] { 
    border: 1px solid black; 
} 

Специальные, благодаря Jacob Gray