Question

<div id="compv-navbar">
  <a href="#"><img src="image1.png" id="icon1"></a> | <a href="#"><img src="image2.png" id="icon2"></a> | <a href="#"><img src="image3.png" id="icon3"></a> |  This is the text I want to select and style specifically.
</div>

我想在HTML / CSS中执行此操作。没有jQuery或Javascript。

另外......我想在不使用其他<div>标记的情况下执行此操作，因为它会抛弃演示文稿。

编辑：为了澄清，我不能将样式应用于'compv-navbar'，因为基本上我想'封闭'那个特定的文本。我希望能够设计它，好像它是它自己的div，没有div。如果我要设置整个compv-navbar div的样式，那么它将完成所有管道（|）并且我不希望这样。我只想要对那段特定的文字进行样式设计。

感谢。

Answer 1

将文字换成<span>而不是<div>，然后将样式应用到#compv_navbar span。 <span>是一个通用的内联元素，因此不应该抛弃你的布局。

这是一个例子，假设管道分隔符不是您想要定位的文本的一部分：

<div id="compv-navbar">
  <a href="#"><img src="image1.png" id="icon1"></a> | 
  <a href="#"><img src="image2.png" id="icon2"></a> | 
  <a href="#"><img src="image3.png" id="icon3"></a> |  
  <span>Text to be styled</span>
</div>

如果您希望以相同的方式设置分隔符的样式，可能使用<span>将不再符合“简单”的描述（将分隔符包装在相同的span标记中，或其他任何内容），在这种情况下，我只使用样式#compv_navbar。

Answer 2

以下选择器如何发布？

#icon3:after

:not(.icon1,.icon2,.icon3)

或者我喜欢BoltClock使用<span>建议

：contains（）做你想要的但是从CSS3开始我不赞成

如何在CSS中选择没有ID的文本？

2 个答案: