CSS选择器与边框圆角效果核心知识点.pdfVIP

A：E~F匹配任何在E元后的同级F元素”；

B：E:before在E元前生成的内容；

C：E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1；

课程回顾D：E[att=val]匹配所有att属性等于“val”的E元素；

E：E:empty匹配一个不包含任何子元素的元素，文本节点也被看作子元素；

（PPT第2页）F：E:focus匹配获得当前焦点的E元素；

G：E[att^=”val”]属性att的值以”val”开头的元素；

H：E:checked匹配表单中被选中的radio（单选框）或checkbox（复选框）元素。）

第二题：nth-child(3n+2)

填空：1-8/左上-右上-右下-左下最后一个颜色填充6px的宽度。

多色边框效果：

border-colors：

div{

height:100px;width:200px;

border:14pxsolid;

-moz-border-top-colors:#f00#f00#f80#f80#ff0#ff0#0f0#0f0#0ff#0ff#00f#00f#f0f#f0f;

-moz-border-bottom-colors:#f00#f00#f80#f80#ff0#ff0#0f0#0f0#0ff#0ff#00f#00f#f0f#f0f;

-moz-border-left-colors:#f00#f00#f80#f80#ff0#ff0#0f0#0f0#0ff#0ff#00f#00f#f0f#f0f;

边框练习-moz-border-right-colors:#f00#f00#f80#f80#ff0#ff0#0f0#0f0#0ff#0ff#00f#00f#f0f#f0f;

}

（PPT第19-20页）

B圆角效果：

.p2{border-radius:25px;}

C圆角效果：

.p3{border-radius:25px0;}

F圆角效果：

.p6{width:100px;border-radius:50px/25px;}

G圆角效果：

.p7{width:0;height:0;background:transparent;border:25p