如何使用CSS:根据内部HTML选择元素

13 浏览
0 Comments

如何使用CSS:根据内部HTML选择元素

我想使用CSS选择器样式化第二个链接(innerHTML2),基于其内部HTML。这种操作可行吗?我尝试使用a[value=innerHTML2],但似乎不起作用。

0
0 Comments

问题的出现原因是CSS无法直接检测锚标签中的内容。[value=]只能用于标签上的属性,而不是标签内的内容。而且,value属性在锚标签上不是有效的HTML属性。

解决方法是给锚标签添加一个类。如果可能的话,可以直接在锚标签上添加一个类。但通常情况下这是不可能的,所以可以使用jQuery来给锚标签添加一个类。可以尝试以下代码:


然后可以使用.anchortwo作为类选择器。

这是最接近的解决方案!需要注意的是,CSS选择器可以检测属性,这些属性在HTML代码中是预定义的,而innerHTML是DOM层的属性。它们可能在js中类似访问,但实际上是两个不同的东西,a.href是CSS知道的一个属性,而a.innerHTML是CSS不知道的一个DOM属性。

0
0 Comments

问题出现的原因是CSS目前无法直接根据元素的内部HTML进行选择,但可以使用JavaScript来实现。解决方法是使用JavaScript的getElementsByTagName方法获取所有a标签,然后遍历每个a标签,判断其innerHTML是否等于指定的值,如果相等,则使用JavaScript的setAttribute方法为该元素添加一个class属性,然后在CSS中通过该class属性来进行样式设置。最后,可以通过设置该class属性在CSS中的样式来实现对指定元素的样式修改。

0
0 Comments

问题:如何使用CSS根据元素的内部HTML选择元素?

原因:根据提供的信息,CSS本身无法实现根据元素的内部HTML选择元素的功能。

解决方法:可以使用jQuery来实现该功能。可以通过自定义jQuery CSS选择器来实现最大的控制。可以参考提供的链接中的博文,其中提供了相应的解决方法。其中,":contains(...)"语法可以实现该功能,但"[innerHTML=...]"语法没有效果。

代码示例:

// 使用":contains(...)"选择器
$("element:contains('innerHTML')")
// 使用"[innerHTML=...]"选择器
$("element[innerHTML='innerHTML']")

需要注意的是,这里提供的解决方法可能需要使用jQuery库,因此在使用之前需要将jQuery库导入到项目中。

虽然提供的链接可能对其他问题有帮助,但对于本问题并没有提供有效的解决方案。

0