css3新增伪类

1.:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

eg:

<h2>Heading</h2>

<p>Paragraph</p>

<p>Paragraph</p>

p:first-of-type {
     color: red;
}


2 :last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p em:last-of-type {
  color: lime;
}

<p>
  <em>我没有颜色 :(</em><br>
  <strong>我没有颜色 :(</strong><br>
  <em>我有颜色 :D</em><br>
  <strong>我也没有颜色 :(</strong><br>
</p>

<p>
  <em>我没有颜色 :(</em><br>
  <span><em>我有颜色!</em></span><br>
  <strong>我没有颜色 :(</strong><br>
  <em>我有颜色 :D</em><br>
  <span>
    <em>我在子元素里，但没有颜色!</em><br>
    <span style="text-decoration:line-through;"> 我没有颜色 </span><br>
    <em>我却有颜色！</em><br>
  </span><br>
  <strong>我也没有颜色 :(</strong>
</p>

 

3. :only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

span:only-of-type {
  color: red;
}

<div>
    <span>CSS</span>和
    <span>HTML</span>是页面制作的基础。
</div>

<div>
    <span>CSS</span>主要是用于定义
    <em>HTML</em>内容在浏览器内的显示样式
</div>



4.:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

main :only-child {
  color: red;
}

<main>
  <div>
    <i>I am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>




5.:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

p:nth-child(2)
{
      background:#ff0000;
}

 

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

 

 

6. :enabled :disabled 控制表单控件的禁用状态。

input:enabled {
      color: #22AA22;
    }
    input:disabled {
      color: #D9D9D9;
    }

<form action="url_of_form">
      <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
      <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
      <input type="submit" value="Submit" />
    </form>