<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>
Я хочу создать только второй (innerHTML2) с помощью селекторов CSS, основанный на внутреннем HTML. Это возможно? Я пробовал использовать a[value=innerHTML2], но он, похоже, не работает.
вы можете использовать свойство css nth-child для доступа к любому элементу и любых изменений. Я использовал его на веб-сайте, который я сделал, чтобы сделать логотип меньшим или большим по ширине экрана.
Это довольно просто с селектором 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
Используя pup, инструмент командной строки для обработки HTML с помощью селекторов CSS, вы можете использовать a:contains("innerHTML1").
Например:
$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
innerHTML1
В настоящее время это невозможно для всех браузеров с css, но с javascript вы можете это сделать
Обновлен w / рабочий код. 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/
С помощью 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 в качестве селектора вашего класса.