html 选择器大于号,在CSS选择器中使用空格或大于符号>

淡淡的烟草味﹌ 2022-10-06 05:54 133阅读 0赞

不,他们是完全不同的,使用>选择一个子元素,而使用空格将选择任何级别的嵌套元素.

例如…

在选择器中使用␣/空格…

This will be selected

This will be selected as well

所以在这里,具有空格的选择器将在父元素的任何嵌套级别定位div.

Demo(使用␣/空格)

.welcome div \{

font-size: 20px;

color: \#f00;

\}

使用>

This won't be selected

This will be selected

而在这里,选择器将定位您的div,该元素是具有.welcome的元素的子元素,但它不会选择嵌套在段标签内的div,因为它是外部div的孙(但不是子)).

.welcome > div \{

font-size: 20px;

color: \#f00;

\}

从MDN：(对于␣)

The ␣ combinator (that’s meant to represent a space, or more

properly one or more whitespace characters) combines two selectors

such that the combined selector matches only those elements matching

the second selector for which there is an ancestor element matching

the first selector. Descendant selectors are similar to child

selectors, but they do not require that the relationship between

matched elements be strictly parent-child.

从MDN :(对于>)

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of “hops” up the DOM.

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中CSS选择器的使用

一、元素[选择器][Link 1] 1、书写格式：标记名\{/\生命块\/\} 2、所有与该标记匹配的元素，都将应用声明块中的规则二、类选择器 1、书写格式：.类名\

你的名字/ 2024年04月03日 13:10/ 0 赞/ 84 阅读

相关 HTML中CSS选择器如何使用

![14bea5581e760369f4217583892eb07c.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 15:19/ 0 赞/ 84 阅读

相关复合选择器-子选择器（HTML、CSS）

复合选择器-子选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

曾经终败给现在/ 2023年10月03日 12:49/ 0 赞/ 29 阅读

相关复合选择器-后代选择器（HTML、CSS）

复合选择器-后代选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

左手的ㄟ右手/ 2023年10月03日 12:49/ 0 赞/ 46 阅读

相关复合选择器-并集选择器（HTML、CSS）

复合选择器-并集选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

- 日理万妓/ 2023年10月03日 12:49/ 0 赞/ 51 阅读

相关复合选择器-focus选择器（HTML、CSS）

复合选择器-:focus选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

港控/mmm°/ 2023年10月03日 12:44/ 0 赞/ 44 阅读

相关 CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~

群组选择器（','） / 表示既h1，又h2 / h1, h2 { color: red; } 后代选择器\[空格\]

╰半橙微兮°/ 2022年12月19日 08:52/ 0 赞/ 289 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 354 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 356 阅读

相关 html 选择器大于号,在CSS选择器中使用空格或大于符号>

不,他们是完全不同的,使用>选择一个子元素,而使用空格将选择任何级别的嵌套元素. 例如… 在选择器中使用␣/空格… This will be selected This

淡淡的烟草味﹌/ 2022年10月06日 05:54/ 0 赞/ 134 阅读