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.

  • 相关阅读:
    codeforces 363B
    hdu 1075 字典树
    D
    C A Simple Job
    Washing Plates 贪心
    HDU 4143 A Simple Problem 分解因式
    ACdream 1236 Burning Bridges 割边 + 去重边
    E. Beautiful Subarrays 字典树
    反素数 -- 数学
    Codeforces Beta Round #79 (Div. 1 Only) B. Buses 树状数组
  • 原文地址:https://www.cnblogs.com/dailymatters/p/12630377.html
Copyright © 2011-2022 走看看