慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕工程2957023

nth-of-type() 是按类型寻找 nth-child 是直接按子元素寻找

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2016-11-18
慕工程2957023

odd表示奇数，even表示偶数\ nth-of-type(n)选择器 “: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)选择器
2016-11-18
慕工程2957023

:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 css选择器中:first-child与:first-of-type的区别 :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： QQ截图20140210135428 p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码： QQ截图20140210135428 p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个； h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个； span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。所以，通过以上两个例子可以得出结论： :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2016-11-17
剩者为王66

多重背景的两种写法：第一种：分别进行设置 background-image: url(5.jpg), url(95.jpg),url(96.jpg); background-position: left top, 100px 0, 200px 0; background-repeat: no-repeat, no-repeat, no-repeat; 第二种：使用一个background将多个背景分别设置然后使用逗号分开 background:url(index.png) left top/200px 80px no-repeat, url(dex.png) right bottom no-repeat;

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2016-11-17
Pretender4300082

文章分列显示：colume-count：

查看全部

0 采集收起来源：CSS3 列间距column-gap
2016-11-17
剩者为王66

background-clip表示从边框、或内填充，或者内容区域向外裁剪背景。

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-11-17
剩者为王66

background-origin需要配合background共同使用。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-11-17
qq_丹_23710224

缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-11-17
慕工程2957023

:nth-child选择器的用法很灵活，可以结合表达式来进行选择。 “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2016-11-17
慕工程2957023

1.结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2018-03-22
慕工程2957023

>是子元素选择器，空格是后代选择器，他们的区别：后代选择器：匹配父子关系和祖先-后代关系子元素选择器：匹配父子关系就是>（子元素选择器）只是匹配到他下面的一层，而不是多层

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2018-03-22
慕工程2957023

结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。例如： <ul> <li><a href="##">Link1</a></li> <li><a href="##">Link2</a></li> <li><a href="##">Link3</a></li> <li><a href="##">Link4</a></li> <li><a href="##">Link5</a></li> </ul> 分析： ul>li:first-child{}只会选择第一个li，而不会选择li里面的a标签

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2018-03-22
慕工程2957023

:target选择器分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。如下面例子： html代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div> css代码： #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; } 上面的代码可以对不同的target对象分别设置不的样

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
慕工程2957023

CSS3 结构性伪类选择器—empty :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
慕工程2957023

not结构伪类选择器，选择不是该元素的input元素，：not前面不能有空格 input:not([type="submit"]){ border:1px solid red; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22

首页上一页 360 361 362 363 364 365 366 下一页尾页

0/150

提交

取消

开始学习

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

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