CSS在H1

改变最后一个字的颜色我有一个网站，我使用CSS3开发，我有标题h1标签：CSS在H1

<h1>main title</h1>

现在我想的标题是在一个不同的颜色：

<h1>main <span>title</span></h1>

所以我做的：

h1 { 
color: #ddd; 
} 
h1 span { 
color: #333; 
}

有没有办法不使用span标记，并且只在CSS中指定最后一个词是不同的颜色？

来源

2012-02-13 Alexei

号你必须明确地指定span元素，因为默认情况下，孩子从父母继承的样式属性，如果没有指定更具体的选择器。 – 2012-02-13 21:36:34

这是不可能用纯CSS。但是，您可以使用lettering.js以获得::last-word选择器。 CSS-Tricks在此有一篇精彩的文章：CSS-Tricks: A call for nth-everything。然后您可以执行以下操作：

h1 { 
    color: #f00; 
} 

/* EDIT: Needs lettering.js. Please read the complete post, 
* before downvoting. Instead vote up. Thank you :) 
*/ 
h1::last-word { 
    color: #00f; 
}

来源

2012-02-13 22:16:59 iblue

::最后一词对我不起作用。这就是我投票的原因。在哪个浏览器中为你工作iblue？ – 2014-04-18 12:23:29

你需要使用lettering.js，它被链接在答案中。它应该适用于所有浏览器。如果没有，请向创建者报告错误。 – iblue 2014-04-18 21:35:31

这不应该被标记为接受的答案，因为它显然是错误的。如果我没有弄错，插件只是给这些字母添加'.char＃'模式，但在CSS中没有提供':: last-word'-like支持。这篇文章只是指出选择这样的选择器是多么有用，以及lettering.js如何填补它自己（不同）方面的空白。 – lima 2014-11-20 01:29:46

CSS在元素上工作......但通常不在元素内的文本或数据上。不过，如果您愿意，可以使用Javascript来处理元素中的实际文本。

来源

2012-02-13 21:37:31 summea

CSS并没有真正以这种方式与文本交互。它与DOM树中的元素进行交互。围绕这个单词添加跨度是区分一段文本的标准方式（至少我曾见过）。只需使用span标签，代码的维护者会感谢你。

来源

2012-02-13 21:37:43

没有选择器的具体词，见Selectors Level 3: 2. Selectors。

您必须使用span标记或运行JavaScript将每个单词转换为包含该单词的范围。

来源

2012-02-13 21:38:32 Zeta

不，CSS中没有可以引用元素的最后（或第一个）单词的选择器。第一个字母和第一行有伪元素，但是单词需要包装在容器中，以便分别对它们进行样式设置。

来源

2012-02-13 21:39:34

不，没有。 CSS中只有::first-letter和::first-line。其他任何事情都必须用元素手动完成（例如span）。

注：无论::first-word也不::last-word计划，至少不是在Selectors level 4 spec。

来源

2012-02-13 21:40:09 0b10011

CSS没有关于单词的知识。唯一存在的是：第一个字母和第一个字母。最后一个单词和伪元素的结构不存在。

如果你真的想在一个元素中有一个解决方法，那么你必须使用JavaScript来解析最后一句话。我认为当你在页面上只有几个案例时，你的方式是最好的方式。

如果您将它用于h1，那么您应该在页面上只使用一次。

来源

2012-02-13 21:42:12

-3

可能与选择 “之后”

element1 
{ 
    properties 
    main 
} 

element1:after 
{ 
    content: "title"; 
    color: pickone; 
}

我推荐住宿 “跨度”。如果你不希望有一个巨大的CSS与额外的东西，你总是可以做到这一点在你的HTML：

<span style="color:#000;">text</span>

来源

2012-02-13 21:46:00 ramonovski

“last-word”在每个浏览器上都不起作用;例如，它不适用于Safari。我不会使用接受的答案。我不认为导入整个库或插件只是为了改变单个标题的最后一个词是个好主意，就像“用大炮杀死bug”一样......而是使用单个Javascript函数，并且一个全球课程。事情是这样的：

<h1>This is my awesome <span class="last-word">title</span></h1>

CSS：

<style> 
    .last-word {font-weight:bold; /* Or whatever you want to do with this element */ } 
</style>

最初，你会是这样的：

<h1 class="title">This is my awesome title</h1>

然后，你可以初始化JavaScript方法对改变的最后一个字$（document）.ready（）=>

<script> 
    $(document).ready(function() { 
     $('.title').each(function(index, element) { 
      var heading = $(element); 
      var word_array, last_word, first_part; 

      word_array = heading.html().split(/\s+/); // split on spaces 
      last_word = word_array.pop();    // pop the last word 
      first_part = word_array.join(' ');  // rejoin the first words together 

      heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join('')); 
     }); 
    }); 
</script>

祝你好运。

来源

2014-12-23 14:51:25 javierluz

我编辑了我的答案，现在即使有多个.title元素也可以工作。 – javierluz 2014-12-23 15:12:02

以iblue的答案，但使一点更明智。

使用lettering.js具有以下设置：

$(document).ready(function() { 
    $('h1').lettering('words'); 
});

这将任何<h1>标签拆分到像这样：

<h1> 
    <span class="word1">Highlight</span> 
    <span class="word2">the</span> 
    <span class="word3">last</span> 
    <span class="word4">word</span> 
    <span class="word5">a</span> 
    <span class="word6">different</span> 
    <span class="word7">color</span> 
</h1>

当然，我们不能仅仅针对.word7因为这可能不是最后的，所以我们可以使用:last-child CSS伪类。

h1 { 
    color: #333; 
} 

h1 > span:last-child { 
    color: #c09; 
}

现在最后一个字是不同的颜色。 Check out the live example。

唯一要小心的是support for :last-child

来源

2015-05-11 13:05:07 WolfieZero

回答

相关问题