时间戳

首页 > 解决方案 > 相邻兄弟和一般兄弟选择器未正确选择

html - 相邻兄弟和一般兄弟选择器未正确选择

问题描述

我尝试使用相邻兄弟选择器和通用兄弟选择器为锚标记之后的段落着色。当我使用选择器时，第一个元素（故事）没有被设置样式。所有前面的元素的样式都正确。我想知道为什么会这样？

html代码如下：

<a class="mylink" href="stories.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80" /></a>
<p>Stories</p>

<a class="mylink" href="movies.html" target="_blank" style="color : blue"><img src="abc.png" alt="Image Not Available" height="80" /></a>
<p>Movies</p>

<a class="mylink" href="tables.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80" /></a>
<p>Tables</p>

<a class="mylink" href="login.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80" /></a>
<p>Login Page</p>

相邻兄弟选择器：

a + p {
  color: green;
}

通用兄弟选择器：

a ~ p {
  color: green;
}

标签： htmlcss

解决方案

这可能是一个特异性问题。选择器正在工作，请参见下面的代码段。您的样式可能会被您定义的另一种样式覆盖。在您的浏览器检查器中，检查<p>元素，如果您看到color: green;带有删除线的元素，则表示它已被覆盖。一些浏览器检查器甚至会告诉您哪个规则覆盖了它。无论如何，!important如果您确实找不到特异性问题，请尝试添加。

a + p {
    color: green;
}
<a class="mylink" href="stories.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80"/></a><p>Stories</p>

<a class="mylink" href="movies.html" target="_blank" style="color : blue" ><img src="abc.png" alt="Image Not Available" height="80" /></a><p>Movies</p>

<a class="mylink" href="tables.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80"/></a><p>Tables</p>

<a class="mylink" href="login.html" target="_blank" style="color: blue"><img src="abc.png" alt="Image Not Available" height="80"/></a> <p>Login Page</p>

推荐阅读