Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta charset="utf-8" /> <style> /* 1.标签选择器:根据元素的标签来选择 例如ul 、li */ ul{ margin: 0; width: 550px; border: 1px dashed #666; padding: 10px 5px; } /*子块撑开父级区块*/ ul:after { content: ''; display: block; clear: both; } ul li { list-style: none; float: left; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background-color: skyblue; margin: 5px; } /* 2.id选择器 根据id来选择元素 */ #qiu1 { background-color: pink; } /* 3.class选择器 根据类来选择元素 */ .qiu2 { background-color: green; } /* 3.属性选择器 根据属性名来选择元素 */ ul li[class] { background-color: lightgrey; } /* 4.属性选择器 根据属性值来选择元素 */ ul li[class="qiu2"] { background-color: yellow; } /* 5.属性选择器 根据属性值开头来选择元素 */ ul li[class^="qiu4"] { background-color: brown; } /* 6.属性选择器 根据属性值结尾来选择元素 */ ul li[class$="qiu-y"] { background-color: black; } /* 7.属性选择器 根据属性值包含指定的子串来选择元素 */ ul li[class*="iu"] { background-color: #616130; } /* 以上的选择器是根据元素特征相关的选择器 */ /*8.后代选择器/层级选择器*/ body ul li { border: 1px solid #666; } /*9.子选择器*/ ul>li[class="qiuqiu"] { background-color: #000079; } /*9.相邻选择器*/ ul li[class="qiuqiu"] ~ * { background-color: #FF00FF; } /*10.相邻兄弟选择器*/ ul li[class="qiuqiu"] + li { background-color: #460046; } /*11.群组选择器*/ h1,p { font-size: 1rem; font-weight: lighter; } /*12.伪类选择器:链接选择器*/ a { font-size: 2rem; } /*访问前*/ a:link{ color:blue ; } /*访问后*/ a:visited{ color:yellow ; } /*获取焦点时*/ a:focus{ color:red ; } /*鼠标悬停*/ a:hover{ color:black; } /*12.伪类选择器:位置*/ /*位置:第一个*/ ul li:first-child { background-color: black!important; } /*位置:最后一个*/ ul li:last-child { background-color: red; } /*位置:固定位置5*/ ul li:nth-child(5) { background-color: red; } /*位置:偶数*/ ul li:nth-child(2n) { background-color: red!important; } /*位置:奇数*/ ul li:nth-child(2n+1) { background-color: green!important; } /*13.伪类选择器:根据子元素的数量来选择*/ ol :only-child { background: #666; } ul li:nth-last-child(4){ background-color:white!important; } ol li:nth-of-type(2){ background-color: wheat; } :empty{ width: 100px; height: 100px; background-color: red; } :empty:after{ content: '你是谁?'; } /*:empty:before{ content: url("1.jpg"); }*/ </style> <title>常用选择器</title> </head> <body> <ul> <li id="qiu1">1</li> <li class="qiu2">2</li> <li class="q3">3</li> <li class="qiu4 qiu-x qiu-y">4</li> <li class="qiuqiu">5</li> <li >6</li> <li >7</li> <li >8</li> <li >9</li> <li >10</li> </ul> <h1>群组选择器</h1> <p>到十点百思不得达克斯</p> <a href="http://www.baidu.com">百度</a> <ol> <li>1</li> </ol> <ol> <li>1</li> <li>2</li> </ol> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
感悟:类型比较多,特别全,注释也比较多,积累知识,点点滴滴,方成汪洋!