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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • noodleko
    “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码： .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; } 结果：最后一个<p>背景变为orange
    查看全部
    0 采集 收起 来源：CSS3 only-child选择器

    2018-03-22

  • noodleko
    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)选择器

    2015-10-11

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

    2015-10-11

  • noodleko
    基数：2n-1, 2n+1,odd
    查看全部
    0 采集 收起 来源：CSS3 nth-of-type(n)选择器

    2015-10-11

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

    2015-10-11

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

    2015-10-11

  • noodleko
    “: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

  • noodleko
    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-last-child(n)

    2015-10-11

  • noodleko
    通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。 HTML代码： <ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ol>​ CSS代码： ol > li:nth-child(2n){ background: orange; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2018-03-22

  • ZPeyton
    .nav li:after{ content:"";position:absolute;right:0;top:26%; height:30px; width:2px; background-image:linear-gradient(to bottom,red, rgba(0,0,0,0.4), rgba(0,0,0,0.0));} 伪元素设置分割线
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • 鸡蛋吹白
    selection=选中
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-10-11

  • 阿豆和猫小姐
    1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（二）

    2015-10-10

  • noodleko
    :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p>​ CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }​
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2018-03-22

  • 天羽蔚灵
    display：flex；flex-direction： row（行）{justify-content：flex-start（左边） | flex-end（右边）| center（居中行排）} | column(列){align-items：flex-start | flex-end | center（居中列排）} ； 注意浏览器兼容
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（二）

    2015-10-10

  • noodleko
    :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2018-03-22

首页上一页739740741742743744745下一页尾页

举报

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

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

查看已购买的课程