Question

我已经做了很长一段时间的CSS和Bootstrap，在观看在线教程时，老师提到了这些内容，但却忽略了它的含义。

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
   color: #fff;
    background: #1A237E;
}

现在我想，如果我们将鼠标悬停在链接上，那么大括号中的代码将会执行，但是那些大于符号的代码以及代码是如何工作的。如果有人可以解释它，那将是非常有用的.. :)） p>

Answer 1

> is the child combinator, also known as the direct descendant combinator.

有关详细信息，请参阅this question

例如

＆＃13;

<html>

<head>
	<style>
		div > p {
			background-color: yellow;
		}
	</style>
</head>

<body>

	<div>
		<p>Paragraph 1 in the div.</p>
		<p>Paragraph 2 in the div.</p>
		<span><p>Paragraph 3 in the div.</p></span>
		<!-- not Child but Descendant -->
	</div>

	<p>Paragraph 4. Not in a div.</p>
	<p>Paragraph 5. Not in a div.</p>

</body>

</html>

＆＃13;

source

在这里，（运行此代码时），您可以看到css仅适用于<p>标记内的<div>元素。它并未直接应用于所有<p>代码

Answer 2

> means it targets it's direct children.

这意味着选择器div＆gt; p.some_class只选择直接位于div中的.some_class段落，而不是在其中嵌套的段落。

Answer 3

>表示下一个选择器是前一个选择器的直接子节点。

即.parent > .child {}选择类child的元素，它们是类parent元素的直接子元素。

这个CSS的含义

3 个答案: