Question

我正在尝试为Brackets创建一个新主题。

Brackets正在使用Less来为代码着色，到目前为止，我已将此代码输入到我的theme.less文件中：

.cm-m-xml {color: #000;} // Making the text between the tags black.
.cm-tag  {color: #009;} // Making the letters between the < and > blue.
.cm-bracket {color: #009;} // Making the < and > blue.
.cm-attribute {color: #009;} // Making the attribute-text including the = blue.
.cm-string {color: #00f;} // Making the attribute-value including the "" blue.

所有标签都用.cm-tag和.cm-bracket规则涂成蓝色。

HTML看起来像这样（我不能改变HTML的方式）：

<span class="cm-m-xml cm-tag cm-bracket">&lt;</span>
<span class="cm-m-xml cm-tag">h1</span>
<span class="cm-m-xml cm-tag cm-bracket">&gt;</span>

我的问题是：我可以使用Less来为其他颜色的img元素着色吗？

Answer 1

少编译成（静态）有效的CSS代码。所以用CSS无法解决的问题也无法通过Less解决。

根据您的问题，我希望图片的HTML看起来如下所示：

<span class="cm-m-xml cm-tag">img</span>

上述img是span标记的内容。您无法根据内容使用CSS选择器，请参阅：Is there a CSS selector for elements containing certain text?

您的问题可以通过jQuery轻松解决：

$(span:contains('img')).css('color','red');

CSS3的最新规范不再包含内容选择器：http://www.w3.org/TR/css3-selectors/#content-selectors

如何使用Less来定位特定的html标签

1 个答案: