• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :first-child

    :first-child表示在一组兄弟元素中的第一个元素。

    语法:

    E:first-child{sRules}

    :first-child是一个伪类,它适用于任何元素,表示在一组兄弟元素中的第一个元素。

    :first-childCSS pseudo-class表示在一组兄弟元素中的第一个元素。

    /* selects any <p> that is the first element among its siblings */
    p:first-child 
    {
      color: lime;
    }
    

    Note:最初定义时,所选元素必须有一个parent。而从选择器 Level 4 开始,parent不再是必须的。

    浏览器支持

    所有浏览器都支持:first-child

    例子

    <ul>
    	<li>列表项一</li>
    	<li>列表项二</li>
    	<li>列表项三</li>
    	<li>列表项四</li>
    </ul>
    

    在上述代码中,如果我们要设置第一个li的样式,那么代码应该写成li:first-child{sRules},而不是ul:first-child{sRules}。

    <div>
      <p>this text is selected!</p>
      <p>this text isn't selected.</p>
    </div>
    
    <div>
      <h2>this text isn't selected: it's not a `p`.</h2>
      <p>this text isn't selected.</p>
    </div>
    
    p:first-child
    {
      color: lime;
      background-color: black;
      padding: 5px;
    }
    

    this text is selected!

    this text isn't selected.

    this text isn't selected: it's not a `p`.

    this text isn't selected.

    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3
        <ul>
          <li>item 3.1</li>
          <li>item 3.2</li>
          <li>item 3.3</li>
        </ul>
      </li>
    </ul>
    
    
    ul li 
    {
      color: blue;
    }
    
    ul li:first-child
    {
      color: red;
      font-weight: bold;
    }
    
    • item 1
    • item 2
    • item 3
      • item 3.1
      • item 3.2
      • item 3.3

    上篇::root

    下篇::target