结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色。

HTML代码:

<ol>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">link3</a></li>
</ol>

CSS代码:

ol > li{
font-size:20px;
font-weight: bold;
margin-bottom: 10px;
} ol a {
font-size: 16px;
font-weight: normal;
} ol > li:first-child{
color: red;
}

演示结果:

结构性伪类选择器—last-child

“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,

ul>li:last-child{background:blue;}

示例演示

在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“post”中最后一个段落不需要底部的margin值,可以使用“:last-child”选择器。

HTML代码:

<div class="post">
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<p>第四段落</p>
<p>第五段落</p>
</div>​

CSS代码:

.post {
padding: 10px;
border: 1px solid #ccc;
width: 200px;
margin: 20px auto;
}
.post p {
margin:0 0 15px 0;
} .post p:last-child {
margin-bottom:;
}

演示结果:

【CSS3】---结构性伪类选择器-first-child+last-child的更多相关文章

  1. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  2. CSS3 结构性伪类选择器(2)

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  3. CSS3 结构性伪类选择器(1)

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  4. css3 结构性伪类选择器

    伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...

  5. css3结构性伪类选择器

  6. h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  7. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  8. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  9. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

随机推荐

  1. 使用jQuery-AJAX–读取获得跨域JSONP数据的示例

    在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现.但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异.如下:   ...

  2. 分布式文件系统FastDFS设计原理

    原文地址: http://blog.chinaunix.net/uid-20196318-id-4058561.html FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker ...

  3. TL-WR703 USB不稳定/当前的总结

    http://see.sl088.com/wiki/WR703_USB%E4%B8%8D%E7%A8%B3%E5%AE%9A/%E5%BD%93%E5%89%8D%E7%9A%84%E6%80%BB% ...

  4. js中的this和apply

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 1.纯粹函数调用. function test() { this. ...

  5. insertAfter()

    <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript window.on ...

  6. Android应用集成支付宝接口的简化

    拿到支付宝接口的andriod demo后有点无语,集成一个支付服务而已,要在十几个java类之间引用来引用去,这样不仅容易导致应用本身代码结构的复杂化,调试起来也很累,于是操刀改造之: 该删的删,该 ...

  7. TP复习7

    //编写search方法,实现搜索 public function search(){ //获取post的数据,根据数据组装查询的条件,根据条件从数据库中获取数据,返回给页面中遍历 if(isset( ...

  8. Perl 小知识之多行匹配

    如果想匹配多行文本(即文本中有换行符)中的内容,比如: aaa ... bbb ... 要匹配aaa和bbb之间的内容,我们可以使用 /aaa.*bbb/s 其中/s修饰符可以让.匹配任何字符,包括换 ...

  9. IPC——共享内存

    Linux进程间通信——使用共享内存 下面将讲解进程间通信的另一种方式,使用共享内存.   一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的 ...

  10. python--面向对象编程介绍

    暂不考虑开发场地等复杂的东西,我们先从人物角色下手, 角色很简单,就俩个,恐怖份子.警察,他们除了角色不同,其它基本都 一样,每个人都有生命值.武器等. 咱们先用非OOP的方式写出游戏的基本角色 引子 ...