为了账号安全,请及时绑定邮箱和手机立即绑定
  • odd奇数,even偶数.

    查看全部
  • 当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。

    查看全部
  • :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

    查看全部
  • https://img1.sycdn.imooc.com//5b39c67b00013dfe15160792.jpg

    /*使用伪元素制作导航列表项分隔线*/

    .nav li:after{

                 content:"";

                 position:absolute;

                 right:0px;

                 top:20px;

                 height:15px;

                 width:1px;

                 background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);

    }

            /*删除第一项和最后一项导航分隔线*/

    .nav li:last-child:after{

            width:0px;

                height:0px;

    }

            


    查看全部
  • div.circle{

        height:100px;/*与width置一致*/

        width:100px;

        background:#9da;

        border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/

        }

    /*任务部分*/   

    div.semi-circle{ 

        height:100px;

        width:50px;

        background:#9da;

        border-radius:50px 0 0 50px;

        }


    查看全部
  • CSS3 only-of-type选择器

    “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。



    示例演示

    通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

    https://img1.sycdn.imooc.com//5b36124c00017bb403030689.jpg


    查看全部
  • CSS3 only-child选择器

    :only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

    示例演示

    通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。


    查看全部
  • CSS3 nth-last-of-type(n)选择器

    :nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

    示例演示

    通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

    https://img1.sycdn.imooc.com//5b3611c80001913403060616.jpg

    查看全部
  • CSS3 last-of-type选择器

    :last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素

    示例演示

    通过“:last-of-type”选择器,将容器“div.wrapper”中最后一个段落元素背景设置为橙色

    (提示:这个段落不是“div.wrapper”容器的最后一个子元素)。

    https://img1.sycdn.imooc.com//5b36118f00014ae603150602.jpg

    查看全部
  • CSS3 nth-of-type(n)选择器

    :nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。



    示例演示

    通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

    https://img1.sycdn.imooc.com//5b3610a70001fa3703670525.jpg


    https://img1.sycdn.imooc.com//5b3610b500011ee103540537.jpg


    查看全部
  • CSS3 first-of-type选择器

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

    示例演示:

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

    https://img1.sycdn.imooc.com//5b361050000108a406800774.jpg

    查看全部
  • CSS3 结构性伪类选择器—nth-last-child(n)

    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。

    https://img1.sycdn.imooc.com//5b360fbd0001433e03360785.jpg

    查看全部
  • CSS3 结构性伪类选择器—nth-child(n)

    https://img1.sycdn.imooc.com//5b360f310001cad104750309.jpg


    https://img1.sycdn.imooc.com//5b360f4000016d9c04950754.jpg


    查看全部
  • CSS3 结构性伪类选择器—last-child

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

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


    https://img1.sycdn.imooc.com//5b360ec30001035004450592.jpg

    https://img1.sycdn.imooc.com//5b360ed700015f9a03050251.jpg



    查看全部
  • CSS3 结构性伪类选择器—first-child

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

    https://img1.sycdn.imooc.com//5b360e2c0001c27403680756.jpg

    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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