Question

我有一些PHP代码可以生成一堆这样的项目：

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

现在我正在尝试使用基于day=值的CSS选择其中一些来为它们提供不同的样式。

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

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

根据另一篇文章的this回答。但它没有做任何事情，即使它适用于jsfiddle（也来自其他帖子）。

我究竟做错了什么？

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

Answer 1

您的选择器工作正常。

问题是您已将块级元素放在内联级元素中。

这会导致浏览器在列表项之前关闭锚元素。因此，锚和列表项（最初是父项和子项）现在是兄弟姐妹（下面的规范详情）。

因为锚点现在是一个没有宽度的空框，所以无法看到背景颜色。

将display: block或inline-block添加到锚点。

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

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

当然，您的加价无效。 li不能是锚元素的子元素。只有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>

来自规范：

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

9.2.1.1 Anonymous block boxes

当内联框包含流内块级别框时，内联框   （以及它在同一行框内的内联祖先）被打破了   块级框（以及任何连续的块级兄弟）   或者仅由可折叠的空白和/或流出来分开   元素），将内联框拆分为两个框（即使其中一个   边是空的），块级盒子的每一边都有一个。这条线   休息前和休息后的盒子都是匿名的   块框，块级框成为那些兄弟   匿名盒子。当这样的内联框受相对影响时   定位，任何产生的翻译也会影响块级别   包含在内联框中的框。

css属性选择器不起作用

1 个答案: