我想将一些CSS应用于我无法在跨度中标记的文本。例如:
<li><a href="google.com">This is marked up</a> and this is not </li>
我想用CSS(最好)或jQuery选择这个位:and this is not
。也许有一种方法可以选择整个li然后排除a,这似乎是旁路。
我无法将其标记的原因是因为我使用WP并且更喜欢这样做而不是深入研究PHP代码。非常感谢您的帮助。
修改
我想要做的是对我要选择的那段文本应用“display:none”。我做不到:
li {display: none; }
因为即使我做了
li a {display: inline; }
这就是为什么我一直在寻找一种方法来专门选择那个文本。
我的页面上有很多这些。
答案 0 :(得分:3)
//assuming that you have only one li element
var a_text = $('li > a').text();
var li_text = $('li').text().replace(a_text,'');
$('li').html($('li').html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));
对于多个元素:
//assuming more then one
$('li').each(function(){
var a_text = $(this).children('a').text();
var li_text = $(this).text().replace(a_text,'');
$(this).html($(this).html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));
});
欢呼声, /马尔钦
答案 1 :(得分:1)
我认为没有办法做到这一点,至少不使用CSS。执行此操作的最安全方法是将所有需要的样式应用于li
元素:
li { font-size: 18px; ... }
并在a
元素中否定您不想要的所有内容:
li a { font-size: 16px; ... }
(您可能希望使用比li
和a
更具体的选择器,可以在前面添加父类的名称。
使用JQuery,你当然可以在“未标记”区域周围包裹一个新标签,但这很复杂,并且在关闭JS时不起作用。我不会这样做。
答案 2 :(得分:0)
是否可以将样式应用于li
元素,然后使用应用于a
元素中li
元素的样式覆盖该影响。
也许创建以下样式;
li.myListElements { color: #FFF; }
li.myListElements a { color: #F00; font-weight: bold; }
调整标记;
<li class="myListElements"><a href="www.google.com">This is marked up</a> and this is not</li>