如何仅用CSS选择HTML <title>标签？实现特定标题下组件样式调整

• 纯CSS无法实现仅在<title>标签存在且为指定值时让属性生效。原因是CSS选择器只能按照DOM树的父节点到子节点方向匹配，没法反向从<body>内的组件回溯到<head>里的<title>标签，二者不存在可被CSS关联的层级关系。

• 你尝试的代码有两个关键问题：

  1. <title>的内容是文本节点，并非value属性，所以title[value="Phone"]这个选择器本身就不生效，而且CSS也没法直接匹配标签的文本内容。
  2. 选择器逻辑错误，组件和<title>不属于同一DOM分支，&:not(title...)这种写法根本没法把组件样式和<title>的状态关联起来。

• 可行的替代方案是用JS配合CSS：

  1. 通过JS获取document.title，判断是否为目标值。
  2. 如果符合条件，给<body>或者组件的父容器加一个自定义类（比如title-is-phone）。
  3. 再在CSS里基于这个类设置组件的特殊样式：

     .title-is-phone .css-class {
       margin-top: 20px;
     }
     

内容的提问来源于stack exchange，提问作者ratzan