`
Butingnal
  • 浏览: 7266 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS 子元素选择器

    博客分类:
  • CSS
阅读更多

在写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

 

0
0
分享到:
评论

相关推荐

    CSS子元素选择器使用介绍

    CSS子元素选择器是用于选取特定父元素的直接子元素的一种CSS选择器。在CSS中,选择器是用于选择HTML文档中元素的规则,它们可以定义应用于特定元素的样式规则。当我们谈论子元素选择器时,它与后代选择器有着明显的...

    CSS选择器.pdf

    接下来是关系选择符,包括后代选择器、直接子元素选择器、相邻选择器、兄弟选择器和并列选择器。后代选择器(EF)用于选中某个元素(E)内部的所有指定元素(F),不论层级深浅。直接子元素选择器(E&gt;F)则只选中...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    详解如何使用CSS选择所有子元素

    CSS(Cascading Style Sheets)是一种用来表现HTML或XML(包括各种XML方言...总之,理解和熟练使用CSS子元素选择器,以及递归选择所有子元素的方法,可以极大地提高页面样式的控制能力,同时也能够优化网页的表现性能。

    JSoup CSS选择器用法大全

    - `E &gt; F`: 选择器 `E` 直接包含选择器 `F` 的所有元素,即子元素。 - `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素,即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素,但...

    react-React组件的css选择器

    内联样式(style属性)的优先级最高,接着是ID选择器,然后是类选择器、属性选择器和元素选择器。合理利用优先级可以更好地控制组件的样式覆盖。 7. **伪类和伪元素** 伪类(如`:hover`, `:active`, `:focus`)和...

    CSS层叠样式表技术参考手册

    - **5.7 CSS子元素选择器** - **子元素选择器**:介绍如何选择特定元素的直接子元素。 - **应用场景**:列举子元素选择器的常见应用场景。 - **5.8 CSS相邻兄弟选择器** - **相邻兄弟选择器**:解释如何选择紧邻...

    css后代选择器和子选择器的区别介绍

    后代选择器可以选取某个元素的所有后代元素,而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别,包括用法、兼容性以及实际效果的不同。 首先,我们从用法上来看两者的区别。后代选择器使用空格来表示,它...

    CSS3选择器教辅.pdf

    - 多元素选择器(element,element):可以同时选择多个指定类型的元素。例如,“div,p”将同时选择所有的和元素。 3. 后代选择器(elementelement): - 用于选择元素内部的元素。例如,“divp”会选择所有位于...

    css的选择器

    - **直接子元素选择器**:使用`&gt;`来选择作为另一个元素直接子元素的元素。 - **例子**: - `div &gt; p`:选择直接位于`&lt;div&gt;`元素内的`&lt;p&gt;`元素。 - **相邻兄弟选择器**:使用`+`来选择紧跟在另一元素后的元素。 - ...

    CSS3选择器

    * 子元素选择器(E &gt; F):匹配所有 E 元素的子元素 F * 毗邻元素选择器(E + F):匹配所有紧随 E 元素之后的同级元素 F 实例: div p { color:#f00; } /* 后代元素选择器 */ #nav li { display:inline; } /* ID ...

    30个最常用css选择器解析

    子选择器用于选取X元素下的直接子元素Y。例如:`div#container &gt; ul { border: 1px solid black; }`,这将将div元素下的直接子元素ul的边框设置为黑色。子选择器的优点是可以选取特定的元素,但缺点是IE6不支持。 9...

    选择器(css3/css2)

    `:only-of-type` 选择器用于选择那些是其父元素中唯一特定类型的子元素的元素。 **示例代码:** ```css div:only-of-type { border: 1px dashed blue; /* 如果 div 是其父元素中的唯一 div 子元素,则应用样式 */...

    css+jquery选择器大全

    5. 层次选择器:包括子元素选择器(`&gt;`)、相邻兄弟选择器(`+`)和通用兄弟选择器(`~`)。 二、CSS属性选择器 1. 属性存在选择器:如`[target]`选择所有具有target属性的元素。 2. 属性值选择器:如`[target="_...

    CSS选择器.txt

    1. **子元素选择器**:`div &gt; p`。选择作为`&lt;div&gt;`的直接子元素的所有`&lt;p&gt;`元素。 2. **相邻兄弟选择器**:`li + li`。选择紧接在另一个`&lt;li&gt;`元素后的`&lt;li&gt;`元素。 3. **一般同胞选择器**:`div ~ p`。选择所有位于...

    python爬虫之css选择器

    - **伪元素选择器**:`:first-letter`, `:before`, `:after` 示例:`p:first-letter` 描述:选择每个`&lt;p&gt;`元素的第一个字母、在每个`&lt;p&gt;`元素之前或之后插入内容。 #### 四、CSS选择器与Python爬虫结合应用 在...

    很不错的CSS练手文件代码,应用多种选择器

    - **子元素选择器**:使用`&gt;`分隔,如`div &gt; p`,只选择直接子元素`p`。 - **相邻兄弟选择器**:使用`+`,如`div + p`,选择紧跟在`div`后面的`p`元素。 - **后续兄弟选择器**:使用`~`,如`div ~ p`,选择`div`...

    CSS3选择器.rar

    4. 子元素选择器: - `A &gt; B`:选择A元素内的直接子元素B。 5. 相邻兄弟选择器: - `A + B`:选择紧跟在A元素后面的同级B元素。 6. 通用兄弟选择器: - `A ~ B`:选择紧跟在A元素后面的所有同级B元素。 7. 伪...

Global site tag (gtag.js) - Google Analytics