Как выделить текст, который не размечен с помощью CSS / jquery?

Question

Я хочу применить CSS к тексту, который я не могу разметить в промежутках.Так, например:

<li><a href="google.com">This is marked up</a> and this is not </li>

Я хочу выбрать с помощью CSS (предпочтительно) или jQuery этот бит: and this is not.Может быть, есть способ выбрать весь li, а затем исключить a, который выглядит как обходкопаться в бесконечных строках кода PHP.Большое спасибо за помощь.

РЕДАКТИРОВАТЬ: То, что я хочу сделать, это применить "display: none" к тому фрагменту текста, который я хочу выделить.Я не могу сделать: li {display: none; }, потому что это отнимает все, даже когда я делаю

li a {display: inline; }

, поэтому я искал способ выбрать только этот текст.

И у меня их много на странице.

Answer 1

//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>'));
});

ура, / marcin

Answer 2

Я не думаю, что есть способ сделать это, по крайней мере, не используя CSS.Самый безопасный способ сделать это - применить все необходимые стили к элементу li:

li { font-size: 18px; ... }

и отменить все, что вам не нужно, в элементе a:

li a { font-size: 16px; ... }

(Возможно, вы захотите использовать более конкретные селекторы, чем просто li и a, возможно, префикс их к имени класса родителя)

С JQuery вы, конечно, можете обернуть новый тег вокруг "область не помечена, но это сложно и не будет работать с отключенным JS.Я бы не стал этого делать.

Answer 3

Можно ли применить стиль к элементу 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>