慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Lunay

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”中偶数段数的背景设置为橙色。 HTML代码： <div class="wrapper"> <div>我是一个Div元素</div> <p>我是一个段落元素</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> </div> CSS代码： .wrapper > p:nth-of-type(2n){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2018-03-22
Lunay

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
Lunay

结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。案例演示选择列表中倒数第五个列表项，将其背景设置为橙色。 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> <li>item11</li> <li>item12</li> <li>item13</li> <li>item14</li> <li>item15</li> </ol> CSS代码： ol > li:nth-last-child(5){ background: orange; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-last-child(n)
2018-03-22
yangshuyun

CSS生成内容在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

查看全部

0 采集收起来源：CSS生成内容
2015-02-02
萧萧520

nth-child()：参数如果直接是数字的话，只能从1开始，不可以是0，那样会匹配不到任何元素 nth-child()：参数如果是表达式的话，n是从0开始的，如果参数的最后结果是0或小于0 ，那样也是匹配不到任何元素的

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2015-02-02
yangshuyun

自由缩放属性resize resize: none | both | horizontal | vertical | inherit none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素，同时修改元素的宽度和高度 horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit 继承父元素的resize属性值。

查看全部

0 采集收起来源：自由缩放属性resize
2015-02-25
Lunay

结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：案例演示通过“: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
魔法师蚂蚱

<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框图片</title> <style> #border_image { margin:0 auto; height:100px; line-height:100px; text-align:center; font-size:30px; width:450px; border: 50px solid #000 ; border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 10 70 70 round; } </style> </head> <body> <div id="border_image"> 请为我镶嵌上漂亮的画框吧 </div> <div><img src ="http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg"></div> </body> </html>

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2018-03-22
提拉

CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

查看全部

0 采集收起来源：CSS3能做什么？
2015-01-31
海南椰子树

:lang伪类使你有能力为不同的语言定义特殊的规则 <p>文字<q lang="no">段落中的引用的文字</q>文字</p> html:lang(zh) { color:lime; background:red; } :lang(en) > span { color:pink; } 本例定义了html文档为zh的语言的文字样式，以及任何元素的span元素内en的语言的样式

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
海南椰子树

最常见的错误是认为 selector:first-child 之类的选择器会选择 p 元素的第一个子元素。其含义是选中作为其父元素的的第一个元素且是selector类型的元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2015-01-31
海南椰子树

多类选择器在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作： <p class="important warning"> This paragraph is a very important warning. </p> 这两个词的顺序无关紧要，写成 warning important 也可以。我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作： .important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;} 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则： .important.urgent {background:silver;} 不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素： <p class="important urgent warning"> This paragraph is a very important and urgent warning. </p>

查看全部

0 采集收起来源：什么是CSS3？
2018-03-22
一淇

1、使用before和after伪类定义元素，可添加内容和盒子； 2、使用target可以指定<a>标签的指向，可用来实现背景图切换效果。（所谓背景图必须放在HTML文档中，当做一组元素）

查看全部

0 采集收起来源：切换背景图像综合练习题
2018-03-22
海南椰子树

元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身： html {color:black;} h1 {color:blue;} h2 {color:silver;} 通配符选择器 CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色： * {color:red;}

查看全部

0 采集收起来源：什么是CSS3？
2015-01-31
海南椰子树

选择器 id选择器在现代布局中，id 选择器常常用于建立派生选择器。 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 也可以独立发挥作用 div#sidebar { 选择div中的一个sidebar border: 1px dotted #000; padding: 10px; } 类选择器在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 和 id 一样，class 也可被用作派生选择器： .fancy td { color: #f60; background: #666; } 元素也可以基于它们的类而被选择： td.fancy { color: #f60; background: #666; } 在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。 <td class="fancy">

查看全部

0 采集收起来源：什么是CSS3？
2018-03-22

首页上一页 1112 1113 1114 1115 1116 1117 1118 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果