Как управлять определенным предложением с помощью css

-1

Я хочу скрыть конкретное предложение и управлять цветом шрифта с помощью css. Мой код ниже.Как управлять определенным предложением с помощью css

<html> 
    <head> 
    <style> 
     body {display:none;} 
     .apple {color:red;} <- pattern a 
     /* .banana {color:yellow;} */ <- pattern b 
    </style> 
    </head> 
    <body> 
    My favorite fruit is <span class="apple">apple</span>. <- sentence 1 
    My favorite fruit is <span class="banana">banana</banana>. <- sentence 2 
    </body> 
</html>

Я хочу показать только предложение 1 с шаблоном, и я хочу, чтобы показать только предложение 2 с рисунком б, но результат в том, что я не вижу каких-либо предложений в моем веб-браузере.

Как редактировать css и html для отображения предложений 1 и 2 с шаблонами a и b, соответственно?

источник

2013-06-23 Akira Noguchi

Вы действительно имеете в виду предложение или слово? – Phrogz

Это не работа для CSS unles, вы решили разбить два предложения на два элемента. Если вы не можете этого сделать, используйте JavaScript – Sourabh

Удалить body {display:none;}

источник

2013-06-23 15:30:15

Appy класс А для первого предложения и класса б для второго предложения. Ниже я использовал <p> but <div> could be used instead.

<p class="a">My favorite fruit is <span class="apple">apple</span></p> 
<p class="b">My favorite fruit is <span class="banana">banana</banana>>/p>

источник

2013-06-23 15:31:42 suspectus

Вы не можете контролировать видимость случайного фрагмента текста с помощью CSS. Даже с JavaScript, о чем вы просите, сложно без дополнительной разметки.

Сначала, как @jaux говорит, вы скрываете все с

body { display:none }

Вам нужно удалить, что если вы хотите что-нибудь, чтобы показать. Затем, как говорит @suspectus, вам нужно будет обернуть каждое предложение в какой-то элемент. Тем не менее, вы не можете делать то, что вы просите, - скрыть родительский элемент на основе дочернего контента - с помощью чистого CSS. Вам нужен JavaScript.

ПОСЛЕ оборачивать ваши предложения с дискретными элементами:

<p>My favorite fruit is <span class="apple">apple</span></p> 
<p>My favorite fruit is <span class="banana">banana</banana>>/p>

Вы должны использовать JavaScript, чтобы найти родительский элемент, например:

// Using jQuery 
$('.apple').closest('p').hide(); 

// Using pure JavaScript 
var apples = document.querySelectorAll('.apple'); 
for (var i=apples.length;i--;){ 
    var parentP = apples[i]; 
    while (parentP && parentP.tagName.toLowerCase()!='p') parentP = parentP.parentNode; 
    if (parentP) parentP.style.display = 'none'; 
}

Вы можете использовать ту же работу, установив стиль на владеющим абзац (или span, или div, или что-то еще) для изменения других свойств, например цвета.

источник

2013-06-23 15:38:37 Phrogz

Удалить тело {display: none;} и применить его специально к предложению, которое вы хотите скрыть.

Я бы использовал идентификаторы, так как вы не будете использовать его несколько раз, но вы можете использовать классы, чтобы помочь вам найти теги <p>.

Однако, если вы хотите получить Cray Cray - Вы можете выбрать их, как это ...

p:first-child { display:none; } 
p:nth-child(2) { display: none;}

Правда, это выглядит странно. Но это работает.

источник

2013-06-23 15:46:50

Как управлять определенным предложением с помощью css

ответ

Смежные вопросы