Предположим, что у меня есть контейнер:
<div id="container"> This is a red apple </div>
Как окрасить слово "красный" с красным цветом? Что-то вроде (псевдокод)
#container:[word="red"]{
color:red;
}
Можно ли сделать это в чистом CSS без введения JavaScript или изменения существующего HTML?
Не доказывать точку, но ответить на ваш вопрос - это возможно в CSS без JS: Пример
Вкратце: мы устанавливаем черный цвет фона для текста и красное фоновое изображение для конкретной красной строки. Мы удалим исходное заполнение текста с помощью -webkit-text-fill-color. Фон обрезается до контура текста с помощью -webkit-background-clip: text;, а красное изображение имеет размер и расположение над любой текстовой строкой, которую мы хотим раскрасить.
Обратите внимание: Я бы никогда не рекомендовал использовать это для какого-либо живого веб-сайта. Это работает в webkit только в том случае, если оно основано на нестандартных правилах CSS, основанных на вековом коде. И цвет не привязан к цветной текстовой строке - он полностью статичен.
Edit: Здесь CSS:
#container {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 1.5em 1em;
background-repeat: no-repeat;
background-position: 3.4em 0;
background-color: #000;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
}
Это решение Vanilla JavaScript, потому что это невозможно с помощью CSS. Не шутите, прочитайте спецификацию . Вы можете сопоставить элемент, имя атрибута в элементе и значение именованного атрибута в элемент. Я ничего не вижу для сопоставления содержимого внутри элемента.
Вот мой выстрел в него. Я уверен, что есть более гладкий способ, но это суть того, как он начнется. Кроме того, поскольку существует конечное количество цветов, которые вы хотите раскрасить, приятно использовать кучу операторов if, подобных мне.
Лучшей техникой, конечно же, было бы сделать это более программно, построив цветной словарь и, следовательно, сделав код организованным. Но это работает, и это Vanilla JS. По-видимому, у меня не было опыта в Regex, поэтому я уверен, что несколько строк не нужны.
var text = document.getElementById("content");
var str = text.innerHTML,
reg = /red|blue|green|orange/ig; //g is to replace all occurances
//fixing a bit
var toStr = String(reg);
var color = (toStr.replace('\/g', '|')).substring(1);
//split it baby
var colors = color.split("|");
if (colors.indexOf("red") > -1) {
str = str.replace(/red/g, '<span style="color:red;">red</span>');
}
if (colors.indexOf("blue") > -1) {
str = str.replace(/blue/g, '<span style="color:blue;">blue</span>');
}
if (colors.indexOf("green") > -1) {
str = str.replace(/green/g, '<span style="color:green;">green</span>');
}
if (colors.indexOf("orange") > -1) {
str = str.replace(/orange/g, '<span style="color:orange;">orange</span>');
}
document.getElementById("updated").innerHTML = str;
Уныло CSS не имеет селектора прямо сейчас, чтобы достичь того, что вам нужно. Для достижения того, что вы хотите, вы должны использовать JavaScript или Server Side Scripting.
Теперь, если вы позволите мне использовать только немного javascript и, возможно, предостережение, о котором я не знаю, насколько это масштабируется, может сломаться много CSS, а реализация немного дрянной. Тем не менее, я думаю, мы можем просто дать css немного руки, переписав HTML.
Как вы знаете, мы можем добавлять интервалы вокруг слов, и мы можем это выбрать. Но вместо того, чтобы просто выбирать выбранную и прикреплять информацию о стиле, мы охватываем все слова. И прикрепите слово как значение к атрибуту "word". С помощью способа получить все textNodes он может выглядеть примерно так:
//adapted from /questions/200339/find-all-text-nodes-in-html-page/1092638#1092638
function makeHighlightable(){
var n, a=[], walk=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
while(n=walk.nextNode()) a.push(n);
for(var i=0;i<a.length;i++){
var newSpan=document.createElement("span")
var words=a[i].nodeValue.replace(/[\r\n]/g,"").split(' ');
for(var j=0;j<words.length;j++){
var escapedWord=words[j].replace(/[^a-zA-Z0-9-']/g,'').toLowerCase()
words[j]='<span word="'+escapedWord+'">'+words[j]+'</span>'
}
words=words.join(" ")
newSpan.innerHTML=words
a[i].parentNode.replaceChild(newSpan,a[i])
}
}
makeHighlightable()
Теперь вы можете сделать
#container [word=red]{ /* space instead of : */
color:#F00;
}
и он может работать.
Это можно легко выполнить с помощью JQuery с помощью однострочных операторов
Выделение и удаление выделения при нажатии кнопки
var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);
EDIT:
$('#id1').click(
function(){
var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);
}
);
$('#id2').click(
function(){
$( "span.red" ).each(function() {
$( this ).contents().unwrap();
});
}
);
.red {
color: red;
}
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
EDIT:
<input type="button" value="Click to highlight" id="id1" />
<input type="button" value="Click to remove highlight" id="id2" />
Простой, но в любом случае ПРАВЫЙ ответ: НЕТ.
Пожалуйста, не грубитесь с другими в ваших комментариях, им потребовалось время, чтобы прочитать ваш вопрос, подумайте о том, как они решат такую проблему, напишите ответ (или комментарий) и... help ВЫ... они не заслуживают того, чтобы их относили грубо.
С наилучшими пожеланиями и хорошим взглядом.
Мигель.
BTW: check Обернуть определенное слово с <span> используя jquery и http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements
Используйте для этого <span>.
<div id="container"> This is a <span class="red">red</span> apple </div>
CSS
.red {
color: red;
}
Edit
Это невозможно без каких-либо дополнительных Javascript или HTML. Согласно спецификации CSS3 такого селектора нет (были мысли о селекторе :contains() для CSS3). Также см. этот и этот Вопрос.
Если вы не хотите добавлять html/javascript, ответ на simpel NO, вы не можете
Взгляните на следующую спецификацию http://www.w3.org/TR/css3-selectors/#selectors
Это все доступные селектора для CSS3, и поэтому это просто невозможно, и ваш ответ.
У вас осталось 2 варианта без изменения содержимого, которое все описано здесь:
Используйте псевдоэлементы, чтобы добавить цветное слово и некоторое тщательное позиционирование, чтобы покрыть исходный черный экземпляр. Он грязный, но он работает.
#container
{
position: relative;
font-family: monospace;
margin: 0;
padding: 0;
font-size: 15px;
}
#container:after
{
content: "red";
color: red;
position: absolute;
left: 90px
}
EDIT: Кроме того, вариант, который работает с пропорциональными шрифтами (но не делает его настолько чистым, по крайней мере для меня, в Chrome):
#container
{
position: relative;
margin: 0;
padding: 0;
}
#container:before
{
content: "This is a ";
position: absolute;
z-index: 2
}
#container:after
{
content: "This is a red";
color: red;
position: absolute;
left: 0;
top: 0;
z-index: 1
}
Я не понимаю, почему люди говорят, что это невозможно сделать без JavaScript. Я помню, как это делалось с <span>
так:
<div id="container"> This is a <span style="color:red">red</span> apple </div>
Вот некоторый код, который использует jQuery для обертывания класса вокруг слова red, который может быть окрашен.
<div id="container">This is a red apple</div>
$("#container:contains('red')").each(function(){
$(this).html($(this).html().replace("red", "<span class='red'>red</span>"));
});
Я имел дело с этой же проблемой. У меня было базовое содержимое, заключенное в тег
и все, что я делал, окружало каждое слово, которое я хотел выделить в теге, и использовал CSS для изменения цвета тегов на красный. Легко и просто.
например
<p>Base text, and then I want <p1>THIS</p1> word highlighted
</p>
p1 {
color: red;
}
Работал так хорошо и не испортил форматирование вообще.
Вы должны использовать тег span, чтобы окружить слово "красный"
<div id="container"> This is a <span>red</span> apple </div>
Затем выберите этот диапазон, используя
#container span {
color: red;
}