it-roy-ru.com

Как CSS: выбрать элемент на основе внутреннего HTML

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Я хочу стилизовать только второе (innerHTML2) с помощью селекторов CSS, основанных на внутреннем HTML. Это возможно? Я пытался использовать a[value=innerHTML2], но это не похоже на работу. 

32
whamsicore

Это невозможно при использовании CSS. Однако вы можете сделать это с помощью jQuery. Есть хороший сообщение в блоге на нем вы можете прочитать.

30
Marc W

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

[value=] будет ссылаться на атрибут в теге

<a href="" value="blah"> innerHTML2 </a>

Не очень полезно, поскольку атрибут value не является допустимым HTML для тега a

Если возможно, добавьте класс к этому тегу a. Поскольку это, скорее всего, невозможно (потому что вы бы это уже сделали), вы можете использовать jQuery для добавления класса в этот тег. Попробуйте что-то вроде этого:

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

А затем используйте .anchortwo в качестве селектора класса.

11
Jason

В настоящее время это возможно не для всех браузеров с CSS, но с помощью JavaScript вы можете сделать это

Обновлен ж/рабочий код. Ссылка JSFiddle ниже:

Исходный HTML для @whamsicore:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

JavaScript:

var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 

         //use javascript to style
         myEles[i].setAttribute('class', "gotcha");
    }
}

CSS для стиля:

/* make this look a bit more visible */
a{
  display: block;
}

.gotcha{
  color: red;
}

https://jsfiddle.net/kjy112/81qqxj23/

11
KJYe.Name

Используя pup , инструмент командной строки для обработки HTML с помощью CSS-селекторов, вы можете использовать a:contains("innerHTML1").

Например:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1 
0
kenorb

вы можете использовать свойство css nth-child для доступа к любому элементу и внесения любых изменений. Я использовал его на веб-сайте, который я сделал, чтобы сделать логотип меньше или больше в зависимости от ширины экрана.

0
Abhansh Giri