为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • UFO2015
    only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
    查看全部
    0 采集 收起 来源：CSS3 only-child选择器

    2016-05-08

  • UFO2015
    only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
    查看全部
    0 采集 收起 来源：CSS3 only-of-type选择器

    2016-05-08

  • UFO2015
    /*CSS3 background ( rgba_rgb_#hex ) 优雅降级*/
    查看全部
    0 采集 收起 来源：CSS3 nth-last-of-type(n)选择器

    2016-05-08

  • UFO2015
    nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
    查看全部
    0 采集 收起 来源：CSS3 nth-last-of-type(n)选择器

    2016-05-08

  • UFO2015
    last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
    查看全部
    0 采集 收起 来源：CSS3 last-of-type选择器

    2016-05-08

  • UFO2015
    nth-of-type(n)选择器<br> <br> “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。 CSS3 background ( rgba_rgb_#hex ) 优雅降级
    查看全部
    0 采集 收起 来源：CSS3 nth-of-type(n)选择器

    2018-03-22

  • UFO2015
    last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。 示例演示 通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色 （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。
    查看全部
    0 采集 收起 来源：CSS3 last-of-type选择器

    2016-05-08

  • UFO2015
    /* :first-of-type */ .wrapper > div:first-of-type { background: orange; } .wrapper > p:first-of-type { background: #000; } .wrapper > pre:first-of-type { background: yellow; } /* :last-of-type */ .wrapper > div:last-of-type { background: #f9f; } .wrapper > p:last-of-type { background: #00f; } .wrapper > pre:last-of-type { background: purple; }
    查看全部
    0 采集 收起 来源：CSS3 first-of-type选择器

    2018-03-22

  • UFO2015
    first-of-type选择器 “: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; }
    查看全部
    0 采集 收起 来源：CSS3 first-of-type选择器

    2018-03-22

  • UFO2015
    结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。 /*odd 奇数*/ ol > li:nth-last-child(2n+1){ background: #f00; } /*even 偶数*/ ol > li:nth-last-child(2n){ background: #000; } /* 倒数 第7个 */ ol > li:nth-last-child(7){ background: #0f0; } /* 倒数 第7个 */ ol > li:nth-last-child(5){ background: orange; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-last-child(n)

    2018-03-22

  • UFO2015
    /*奇数 odd*/ ol > li:nth-child(2n+1){ background: green; } /*偶数 even*/ ol > li:nth-child(2n){ background: red; } /* num 7*/ ol > li:nth-child(7){ background: yellow; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2018-03-22

  • UFO2015
    结构性伪类选择器—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:0; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—last-child

    2018-03-22

  • UFO2015
    ul > li:first-child { color: red; } ul > li:last-child { color: yellow; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2018-03-22

  • UFO2015
    结构性伪类选择器—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; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2018-03-22

  • UFO2015
    /* href="#brand" 与 d="brand" 绑定*/ /* :target p*/ :target p{ background: orange; color: #000; } /* :target all*/ :target { background: orange; color: #fff; } /* href="#brand1" 与 d="brand1" 绑定*/ :target { background: orange; color: #fff; } :target h3{ background: red; color: #fff; } :target pre{ background: green; color: #fff; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—target

    2018-03-22

首页上一页536537538539540541542下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程