• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 子选择器

    定义和用法

    • E>F选择器为特定父元素的下一级的子元素
    • 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素。
    • 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素的子元素

    语法:

    E>F{sRules}

    选择所有作为E元素的子元素F。

    与包含选择符(E F)不同的是,子选择符只能命中子元素,而不能命中孙辈。

    浏览器支持

    所有浏览器都支持

    例子

    选择所有父级是<div>元素的<p>元素:

    div > p
    {
      background-color:yellow;
    }
    
    
    <style>
    .demo > p{color:red;}
    .demo > h3{color:blue;}
    </style>
    
    <div class="demo">
    	
    	<p>我第1个是p标签</p>
    	<h3>我是标题1</h3>
    
    	<p>我第2个是p标签</p>
    	<h4>我是小标题</h4>
    
    	<p>我第3个是p标签</p>
    	
    </div>
    

    效果如下:

    我第1个是p标签

    我是标题1

    我第2个是p标签

    我是小标题

    我第3个是p标签

    上篇:包含选择器

    下篇:相邻选择器