Pregunta Cómo CSS: seleccionar elemento basado en HTML interno [duplicado]


Esta pregunta ya tiene una respuesta aquí:

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

Quiero diseñar el segundo solo (innerHTML2) usando selectores CSS, basados ​​en el HTML interno. es posible? He intentado usar a[value=innerHTML2] pero parece no funcionar


32
2018-01-27 01:00


origen


Respuestas:


Esto no es posible usando CSS. Sin embargo, puedes hacerlo usando jQuery. Hay un buen entrada en el blog en él puedes leer.


27
2018-01-27 01:02



Al usar CSS no puede detectar el contenido de la etiqueta de anclaje.

[value=] se referiría a un atributo en la etiqueta

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

No es muy útil ya que el atributo de valor no es HTML válido en una a etiqueta

Si es posible, dale una clase a esa clase a etiqueta. Como es muy probable que eso no sea posible (porque ya lo habría hecho), puede usar jQuery para agregar una clase en esa etiqueta. Pruebe algo como esto:

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

Y luego usa .anchortwo como su selector de clase


11
2018-01-27 01:14



Actualmente no es posible para todos los navegadores con CSS, pero con Javascript puedes hacer esto

Actualizado con código de trabajo. Enlace JSFiddle a continuación:

HTML inicial por @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 para el estilo:

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

.gotcha{
  color: red;
}

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


10
2018-01-27 01:14



puede usar la propiedad css nth-child para acceder a cualquier elemento y hacer cualquier cambio. Lo usé en un sitio web que hice para hacer un logotipo más pequeño o más grande en función del ancho de la pantalla.


0
2018-01-27 20:33



Utilizando pup, una herramienta de línea de comandos para procesar HTML utilizando selectores de CSS, puede usar a:contains("innerHTML1").

Por ejemplo:

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

0
2017-07-08 01:32



<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>

-1
2017-11-27 09:52



Esto es bastante simple con un selector n-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>

Editar: Aquí está la fuente en la que encontré esto. Compruebe aquí la compatibilidad del navegador. Fuente: http://reference.sitepoint.com/css/pseudoclass-nthchild


-7
2018-01-27 01:08