Как 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], но он не работает.

Ответ 1

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

Ответ 2

С помощью 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 как ваш селектор классов.

Ответ 3

В настоящее время это невозможно для всех браузеров с css, но с javascript вы можете это сделать

var myEles = document.getElements('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 
         //use javascript to style
    }
}

Ответ 4

<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>

Ответ 5

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

Ответ 6

Это довольно просто с селектором nth-child.

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Изменить: Здесь источник, на котором я нашел это. Проверьте совместимость браузера. Источник: http://reference.sitepoint.com/css/pseudoclass-nthchild