zoukankan      html  css  js  c++  java
  • :first-child 选择器

    :first-child选择器

    p:first-child选择的元素满足两个要求:

    • 是第一个子元素
    • 这个子元素刚好是p

    下面来看一个案例:

    p:first-child {
    	color: red;
    }
    li:first-child {
    	color: blue;
    }
    
    <div>
    	<p>These are the necessary steps:</p>
    	<ul>
    		<li>Intert Key</li>
    		<li>Turn key <strong>clockwise</strong></li>
    		<li>Push accelerator</li>
    	</ul>
    	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    

    分析:

    • 第一个规则是将某元素的“第一个并且是p元素的子元素”设置颜色为红色
    • 第二个规则是将某元素的“第一个并且是li元素的子元素”设置颜色为蓝色

    效果如下:

    These are the necessary steps:

    • Intert Key
    • Turn key clockwise
    • Push accelerator

    Do not push the brake at the same time as the accelerator.

    注意:如果HTML代码改成如下情况,由于p元素不再是第一个子元素,而第一个子元素又不是p,因此结果会发生变化。

    <div>
    	<ul>These are the necessary steps:</ul>
    	<ul>
    		<li>Intert Key</li>
    		<li>Turn key <strong>clockwise</strong></li>
    		<li>Push accelerator</li>
    	</ul>
    	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    
      These are the necessary steps:
    • Intert Key
    • Turn key clockwise
    • Push accelerator

    Do not push the brake at the same time as the accelerator.

  • 相关阅读:
    leecode练习--804、唯一摩尔斯密码词
    leecode练习--832、翻转图像
    leecode练习--561、数组拆分Ⅰ
    leecode练习--942、增减字符串匹配
    第二十篇 编程语言分类
    《英语学习》记录
    《视频笔记》记录
    《爬虫》爬取可用的免费IP
    《读书笔记》记录
    数据结构与算法之美
  • 原文地址:https://www.cnblogs.com/dailymatters/p/12630377.html
Copyright © 2011-2022 走看看