Question

我有这个css：

.test1 {
font-size:10pt;
}

.test2 {
font-size:12pt;
}

我有这个html：

<div class='test1'>name</div>
<div class='test2'>desc_name</div>


<div class='test1'>family</div>
<div class='test2'>desc_family</div>


<div class='test1'>password</div>
<div class='test2'>desc_pass</div>

我要做的是选择类test1，但只选择标签内包含“family”的标签并给出背景

我只需要一个css的解决方案，我不需要在html内部进行更改
可能吗？谢谢

Answer 1

纯CSS无法实现。您无法使用CSS（3及更高版本）选择元素内容。

唯一可以做的是指定一些属性，如：

<div class='test1' data-value="family">family</div>

然后用CSS选择它：

div.test1[data-value='family'] { /* ... */ }

Answer 2

如果您使用的是CSS3以下的任何内容 -

div.test1:contains("family") {
  background: *;
}

CSS3中不推荐使用:contains()伪类 - 我不推荐使用它，也不完全肯定任何浏览器完全支持它。这个答案完全是主观的。

编辑：显然:contains() psuedo类在jQuery中运行（在第1.9版中测试过）。

您可以使用jQuery更改样式。（此解决方案需要仅限CSS的解决方案，但如果可以，请使用它！）

$("div.test1:contains('family')").css({ background: "whatever" });

Answer 3

你可以使用像这样的多个类，

.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.family {
/* style */
}

和HTML代码，

<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>

Answer 4

    <div class='test1 family'>family</div>
    <div class='test2'>desc_family</div>

我会建议这个以防止覆盖

    .test1 {
    font-size:10pt;
    }
    .test2 {
    font-size:12pt;
    }
    .test1.family {
    /* style */
    }

css选择内部标签

4 个答案: