在写css样式的时候会用到大于号( '>' )用来选择子代元素,设定的样式有时候有效有时候无效,why?,今天去查看一下,w3school是这样解释的:
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1
详细请参考:http://www.w3school.com.cn/css/css_selector_child.asp
相关推荐
CSS子元素选择器是用于选取特定父元素的直接子元素的一种CSS选择器。在CSS中,选择器是用于选择HTML文档中元素的规则,它们可以定义应用于特定元素的样式规则。当我们谈论子元素选择器时,它与后代选择器有着明显的...
接下来是关系选择符,包括后代选择器、直接子元素选择器、相邻选择器、兄弟选择器和并列选择器。后代选择器(EF)用于选中某个元素(E)内部的所有指定元素(F),不论层级深浅。直接子元素选择器(E>F)则只选中...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
CSS(Cascading Style Sheets)是一种用来表现HTML或XML(包括各种XML方言...总之,理解和熟练使用CSS子元素选择器,以及递归选择所有子元素的方法,可以极大地提高页面样式的控制能力,同时也能够优化网页的表现性能。
- `E > F`: 选择器 `E` 直接包含选择器 `F` 的所有元素,即子元素。 - `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素,即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素,但...
内联样式(style属性)的优先级最高,接着是ID选择器,然后是类选择器、属性选择器和元素选择器。合理利用优先级可以更好地控制组件的样式覆盖。 7. **伪类和伪元素** 伪类(如`:hover`, `:active`, `:focus`)和...
- **5.7 CSS子元素选择器** - **子元素选择器**:介绍如何选择特定元素的直接子元素。 - **应用场景**:列举子元素选择器的常见应用场景。 - **5.8 CSS相邻兄弟选择器** - **相邻兄弟选择器**:解释如何选择紧邻...
后代选择器可以选取某个元素的所有后代元素,而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别,包括用法、兼容性以及实际效果的不同。 首先,我们从用法上来看两者的区别。后代选择器使用空格来表示,它...
- 多元素选择器(element,element):可以同时选择多个指定类型的元素。例如,“div,p”将同时选择所有的和元素。 3. 后代选择器(elementelement): - 用于选择元素内部的元素。例如,“divp”会选择所有位于...
- **直接子元素选择器**:使用`>`来选择作为另一个元素直接子元素的元素。 - **例子**: - `div > p`:选择直接位于`<div>`元素内的`<p>`元素。 - **相邻兄弟选择器**:使用`+`来选择紧跟在另一元素后的元素。 - ...
* 子元素选择器(E > F):匹配所有 E 元素的子元素 F * 毗邻元素选择器(E + F):匹配所有紧随 E 元素之后的同级元素 F 实例: div p { color:#f00; } /* 后代元素选择器 */ #nav li { display:inline; } /* ID ...
子选择器用于选取X元素下的直接子元素Y。例如:`div#container > ul { border: 1px solid black; }`,这将将div元素下的直接子元素ul的边框设置为黑色。子选择器的优点是可以选取特定的元素,但缺点是IE6不支持。 9...
`:only-of-type` 选择器用于选择那些是其父元素中唯一特定类型的子元素的元素。 **示例代码:** ```css div:only-of-type { border: 1px dashed blue; /* 如果 div 是其父元素中的唯一 div 子元素,则应用样式 */...
5. 层次选择器:包括子元素选择器(`>`)、相邻兄弟选择器(`+`)和通用兄弟选择器(`~`)。 二、CSS属性选择器 1. 属性存在选择器:如`[target]`选择所有具有target属性的元素。 2. 属性值选择器:如`[target="_...
1. **子元素选择器**:`div > p`。选择作为`<div>`的直接子元素的所有`<p>`元素。 2. **相邻兄弟选择器**:`li + li`。选择紧接在另一个`<li>`元素后的`<li>`元素。 3. **一般同胞选择器**:`div ~ p`。选择所有位于...
- **伪元素选择器**:`:first-letter`, `:before`, `:after` 示例:`p:first-letter` 描述:选择每个`<p>`元素的第一个字母、在每个`<p>`元素之前或之后插入内容。 #### 四、CSS选择器与Python爬虫结合应用 在...
- **子元素选择器**:使用`>`分隔,如`div > p`,只选择直接子元素`p`。 - **相邻兄弟选择器**:使用`+`,如`div + p`,选择紧跟在`div`后面的`p`元素。 - **后续兄弟选择器**:使用`~`,如`div ~ p`,选择`div`...
4. 子元素选择器: - `A > B`:选择A元素内的直接子元素B。 5. 相邻兄弟选择器: - `A + B`:选择紧跟在A元素后面的同级B元素。 6. 通用兄弟选择器: - `A ~ B`:选择紧跟在A元素后面的所有同级B元素。 7. 伪...