first-of-type选择器

来源:互联网 发布:mac 便签 桌面 编辑:程序博客网 时间:2024/05/16 06:26

“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示:

通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。

HTML代码:

<div class="wrapper">  <div>我是一个块元素,我是.wrapper的第一个子元素</div>  <p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p>  <p>我是一个段落元素</p>  <div>我是一个块元素</div></div>

CSS代码:

.wrapper {  width: 500px;  margin: 20px auto;  padding: 10px;  border: 1px solid #ccc;  color: #fff;}.wrapper > div {  background: green;}.wrapper > p {  background: blue;}/*我要改变第一个段落的背景为橙色*/.wrapper > p:first-of-type {  background: orange;}

演示结果:

<!DOCTYPE www.dztcsd.com html>
<html>
<head> 
<meta charset="utf-8">
<title>:first-of-type</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <div>我是第三个Div元素</div>
  <div>我是第四个Div元素</div>
</div>
</body>
</html>

任务

在右侧CSS编辑器中第16行输入正确的代码,将容器“div.wrapper”中的第一个div元素背景设置为橙色。

0 0
原创粉丝点击