CSS样式化超链接

Question

我试图给一个锚点标签<a>应用样式，但没有成功，我想在第一个六边形中创建一个带有其他六边形的样式的URL。我需要让MyURL的样式像其他六边形中的"This is a title"。

  <li>
    <div>
    <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
      <h1><a href="#">MyURL</a></h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </div>
  </li>

(已解决) pen -> http://codepen.io/anon/pen/PZNWGN

这是基于下面的主题：

响应式六边形网格

有人能给我一些帮助吗？

- odew

---

你不能为URL应用样式。你可以为锚元素应用样式，如果你发布了你为<a>标签创建的样式，有人可能会告诉你它们为什么不起作用。 - Dave

谢谢Dave，我想说的是锚标签，我会编辑问题。 - odew

Answer 1

它继承了#categories li *的position:absolute样式。通过添加以下内容来覆盖它：

#categories li h1 * { position: relative; }

或者，将#categories li *替换为更具体的内容。

- Blazemonger

---

#categories li a 似乎有效 - Dave

＃categories li * 不是一个高效的选择器。CSS会从右边开始解析选择器... 这意味着 * 将选择页面上的所有元素，然后再看它是否有父级 li，最好是针对一些特定的元素进行目标设置，而不是使用 *。请参阅：为什么浏览器从右到左匹配CSS选择器？ - Sergey

这只是微小的优化，实际上并不需要过于担心。无论如何，更好的解决方案是用更具体的内容替换 #categories li *。 - Blazemonger

Answer 2

在所有其他六边形中，标题都是：

<h1>Title</h1>

但是在第一个中，您将标题放在a标签中，如下所示：

<a href="#">This is a title</a>

这会导致问题

- Franco

---

但是 a 在 h1 内部。 - cor

当然，但是你没有注意到@Dave在他的评论中也说了什么。换句话说，你的“css”目前可以正确对齐<h1>标签，而不是'a'标签。 - Franco

@Blazemonger 的答案是正确的 ;) - cor