代码
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> /*标签选择器*/ ul{ padding:10px 5px;/*内边距*/ margin:0;/*外边距*/ width:500px;/*设置宽度*/ border:1px dashed #666;/*设置边框*/ } ul:after { /*子块撑开父块*/ content:''; /*在子元素尾部添加空内容元素*/ display: block; /*并设置为块级显示*/ clear:both; /*清除二边的浮动*/ } ul li { list-style: none; /*去掉默认列表项样式*/ float: left; /*向左浮动*/ width: 40px; /*设置宽度*/ height: 40px; /*设置高度*/ line-height: 40px; /*文本垂直居中*/ text-align: center; /*文本水平居中*/ border-radius: 50%; /*设置边框圆角*/ box-shadow: 2px 2px 2px #888; background: lightgreen; /*淡绿色背景*/ margin-right: 5px; /*设置每个球之间的右外边距*/ } /*id选择器*/ #item1 { background-color: blue; } /*类选择器*/ .item2 { background-color:pink; } /*属性选择器: 属性名*/ ul li[class] { background-color: blueviolet; } /*属性选择器: 属性值*/ ul li[class="item2"] { background-color: grey; } /*属性选择器: 以cat开头的li*/ ul li[class^="cat"] { background-color: brown; } /*属性选择器: 以pig结束的li*/ ul li[class$="pig"] { background-color: red; } /*属性选择器: 属性值中包含指定子串*/ ul li[class*="te"] { /*含有te的小球应该会变色,但是第1个小球是id选择器,id选择器优先级大于标签属性选择器,如果改成class选择器就会有效果*/ background-color: green; } /*后代选择器,同时可以不要ul效果是一样的*/ body ul li { border: 1px solid black; } /*子选择器,这是选择ul中以pig结尾的li*/ ul > li[class$="pig"] { background-color: yellow; } /*相邻选择器*/ ul li[class$="pig"]~*{ /*选择以pig为结尾的元素之后的所有同级元素*/ font-size:20px; background-color: black; color: white; } /*选择以pig结尾的相邻的li元素*/ ul li[class$="pig"]+li { background-color: pink; color: green; } /*群组选择器*/ div,h2{ color:red; } /*伪类选择器*/ a{ font-size:40px; } /*鼠标悬停时*/ a:hover{ text-decoration:none; color:pink; } /*访问前*/ a:link{ background:black; } /*访问后*/ a:visited{ background:green; } /*获取焦点时*/ a:focus{ color: white; } /*鼠标点击时*/ a:active{ font-size:20px; } /*选择集合中的第一个元素*/ ol li:first-child { color:red; } /*选择集合中的最后一个子元素*/ ol li:last-child { color: green; } /*按索引选择第二个*/ ol li:nth-child(2){ background-color: red; } /* 选择所有的奇数的元素*/ /* 2n偶数, even偶数, 2n+1奇数, odd奇数*/ ol li:nth-child(2n+1){ background-color: yellow; } /*伪类选择器: 根据子元素数量*/ /*选择具有唯一子元素的元素*/ ol:only-child { background-color: lawngreen; } /* 选择指定类型的唯一子元素 */ ol li:only-of-type { background-color: black; } /* 倒数选择指定位置的元素 */ ol li:nth-last-child(5) { background-color: green; } /*选择指定父级的第三个<li>子元素*/ ol li:nth-of-type(3) { background-color:wheat; } /*选择页面中的空元素p*/ :empty { width: 100px; height: 100px; background-color: lightgreen; } :empty:after { content: 'http://www.baidu.com'; } :empty:before { content: '请打开链接'; } </style> </head> <body> <ul> <li id="item1">1</li> <!-- 设定id选择器 --> <li class="item2">2</li> <li class="cat dog pig">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <div>他的头发是红棕色的</div> <h2>他的头发是红棕色的</h2> <a href="http://www.baidu.com">百度</a> <ol> <li>你</li> <li>我</li> <li>他</li> <li>它</li> </ol> <br> <br> <br> <br> <ol> <li>123</li> </ol> <ol> <li>123</li> <li>123</li> <li>123</li> </ol> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <p></p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
预览图
手写代码
手抄的主要是常用元素的单位,这样对于三个常用单位记得更加清晰,知道了px是相对于当前显示器,em相对于当前元素或父元素字体大小,rem相对于根元素html字体大小
总结:
主要学习了表单,表单的引用,常用的元素单位,常用的选择器,样式的继承,样式冲突的处理,以及应用的案例
1、px是相对于当前显示器,em相对于当前元素或父元素字体大小,rem相对于根元素html字体大小
2、对于表单的理解更加深刻
3、在发生样式冲突时,知道改什么处理,了解了内部、外部、内联的优先级
4、一些常用选择器的应用更加熟悉