php - css 属性选择器不起作用

Question

我有一些 PHP 代码可以生成一堆这样的元素:

<a href="page.php?day=1&month=1&year=2017"><li>item 1</li></a>

现在我正尝试根据它们的 day= 使用 CSS 选择其中的一些赋予它们不同样式的值(value)。

所以我尝试了这个 CSS 代码:

a[href*="day=1"] { background-color: grey; }

根据 this另一个帖子的回答。但即使它在 jsfiddle 中工作，它也没有做任何事情。 (也来自另一篇文章)。

我究竟做错了什么？

编辑:我的实际代码显然在 <a><li></li></a> 周围有一个元素元素。问题是我的 css 似乎没有达到我的元素。因为当我检查应该受 chrome 开发人员工具影响的元素时，它没有显示任何 css 痕迹。我认为它与生成 php 有某种关系

Answer 1

您的选择器工作正常。

问题是你将一个 block 级元素放在了一个行内级元素中。

这会导致浏览器关闭列表项之前的 anchor 元素。因此， anchor 和列表项(最初是父项和子项)现在是兄弟项(下面的规范详细信息)。

因为anchor现在是一个没有宽度的空盒子，所以看不到背景颜色。

将display: block 或inline-block 添加到anchor。

[href*="day=1"] { background-color: aqua; display: block; }

<a href="page.php?day=1&month=1&year=2017">
  <li>item 1</li>
</a>

当然，您的标记无效。 li 不能是 anchor 元素的子元素。只有 ul、ol 和 menu 可以是父元素。考虑一下:

a {
  display: block;
}
a[href*="day=1"] {
  background-color: aqua;
}

<ul>
  <li>
    <a href="page.php?day=1&month=1&year=2017">item 1</a>
  </li>
</ul>

---

来自规范:

内联级元素包含 block 级元素时的浏览器行为。

9.2.1.1 Anonymous block boxes

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) is broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.