Question

我们来看下面的示例代码：

/*ul:first-of-type li a { color: red;}
ul > li a { color: red;}
ul:first-child li a { color: red;}*/

<ul>
	<li><a href="">Text</a></li>
	<li><a href="">Text</a></li>
	<li><a href="">Text</a></li>
	<li>
		<a href="">Text</a>
		<ul>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
		</ul>
	</li>
	<li><a href="">Text</a></li>
</ul>

我的目标是选择父a代码中的ul代码，而不是ul内嵌套的li。

我已经阅读了多篇关于此的文章，但遗憾的是无法通过CSS找到解决方案。

任何人都可以看看这个吗？

Answer 1

下面的CSS只会选择直接li个孩子，而在其中只会选择直接a个孩子。由于第二个ul是li的子项，因此不会选择其子项。它需要以下内容来选择第二个ul中的超链接：

ul > li > ul > li > a

＆＃13;

ul.main > li > a {
  color: red;
}

＆＃13;

<ul class="main">
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li>
    <a href="">Text</a>
    <ul>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
    </ul>
  </li>
  <li><a href="">Text</a></li>
</ul>

＆＃13;

Answer 2

这应该只针对李的嵌套一层深度

ul > li > a

但如果没有，则覆盖第二级ul

的这种风格

ul li ul li a

＆＃13;

ul > li > a { color: red;}
ul li ul li a { color: black;}

＆＃13;

<ul>
	<li><a href="">Text</a></li>
	<li><a href="">Text</a></li>
	<li><a href="">Text</a></li>
	<li>
		<a href="">Text</a>
		<ul>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
			<li><a href="">Text</a></li>
		</ul>
	</li>
	<li><a href="">Text</a></li>
</ul>

＆＃13;

仅通过CSS选择父ul下的li

2 个答案: