css3选择器能不能选择内容

在CSS中，选择器是指用来选择指定元素的方法。CSS3选择器在选择元素时功能更加强大，能够更精确地选择元素。

/*选中class为box的所有元素*/
.box {
  /*样式规则*/
}

/*选中id为box的元素*/
#box {
  /*样式规则*/
}

/*选中所有p标签下的第一个子元素*/
p:first-child {
  /*样式规则*/
}

/*选中第二个li元素*/
ul li:nth-child(2) {
  /*样式规则*/
}

/*选中所有属性为href且以https开头的a标签*/
a[href^="https"] {
  /*样式规则*/
}

/*选中属性class包含box的a标签*/
a[class~="box"] {
  /*样式规则*/
}

/*选中所有以pdf结尾的链接*/
a[href$=".pdf"] {
  /*样式规则*/
}

/*选中含有文本“CSS”的p标签*/
p:contains("CSS") {
  /*样式规则*/
} 

然而，CSS3选择器并不能选择元素中的具体内容。例如，如果想要选中一个段落中的某个单词，CSS3选择器是做不到的。

但是，可以通过其他方法来改变内容的样式。可以使用伪元素将一个文本节点拆分为多个元素，并给每个元素设置不同的样式。例如，在以下代码中，可以将段落中的“CSS”和“HTML”分别变为绿色和蓝色：

/*将选择器重载为伪元素*/
p::after {
  content: "";
}

/*选中包含CSS文本的伪元素*/
p:contains("CSS")::after {
  content: "CSS";
  color: green;
}

/*选中包含HTML文本的伪元素*/
p:contains("HTML")::after {
  content: "HTML";
  color: blue;
} 

在上述代码中，代码将选择器重载为伪元素，并将每个文本节点作为一个单独的元素来处理。通过给每个伪元素设置不同的样式，可以实现对文本内容的选择和修改。