html - css在标签内选择

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: *;
}

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

编辑：显然:contains()伪类在 jQuery 中工作（在 v 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 */
    }