Question

我有以下代码行

<div id="chat">
  <p class="chatrow_1">
    <span class="time">01:41:55</span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="http://i.imgur.com/ImgurID.png"/>
      </span>
      <span class="user">
        <strong>
          <span class="chat-username" data-user="1">Anonymous_001</span>
        </strong>
      </span>
      <span class="msg">
        <span class="chat-msg">Hello</span>
      </span>
    </span>
  </p>
</div>

我想更改包含#chat > p的{{1}}背景颜色使用没有jQuery的纯CSS，因为聊天正在使用每条新消息进行更新。我已经尝试过使用Javascript / jQuery

我尝试过使用类似的东西：

[data-user="1"]

不幸的是，它不存在。

chat like that

Answer 1

您无法从其任何后代中选择父元素。

但是，您可以使项目看起来像选中。诀窍是在最外层的父级上添加position: relative，并在子元素上使用:before或:after伪元素。

这是css代码：

.chatrow_1 {
  position: relative;
}

[data-user="1"]:before {
  background: skyblue;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

＆＃13;

.chatrow_1 {
  position: relative;
}

[data-user="1"]:before {
  background: skyblue;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

＆＃13;

<div id="chat">
  <p class="chatrow_1">
    <span class="time">
      01:41:55
    </span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="" alt="Image Description" />
      </span>
      <span class="user">
        <strong>
          <span class="chat-username" data-user="1">
            Anonymous_001
          </span>
        </strong>
      </span>
      <span class="msg">
        <span class="chat-msg">Hello</span>
      </span>
    </span>
  </p>
  <p class="chatrow_1">
    <span class="time">
      01:41:55
    </span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="" alt="Image Description" />
      </span>
      <span class="user">
        <strong>
          <span class="chat-username" data-user="2">
            Anonymous_001
          </span>
        </strong>
      </span>
      <span class="msg">
        <span class="chat-msg">Hello</span>
      </span>
    </span>
  </p>
</div>

＆＃13;

Answer 2

CSS目前没有＆＃34;父选择器＆＃34;。

Selectors Level 4 Working Draft包含一个：has（）伪类，可以实现这一点，但目前还没有任何浏览器实现（请参阅Can I use和MDN Browser compatibility）

理论上，它会像这样工作：

#chat > p:has(> [data-user="1"]){
  background-color: red;
}

与此同时，您唯一的选择是：

使用Javascript实现此行为
在创建HTML输出时在父标记上设置类
＆＃34;假＆＃34;看起来像你希望它使用[data-user="1"]

根据元素的子元素将CSS样式应用于元素 - 仅限CSS

2 个答案: