基本选择器代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /*标签选择器*/ ul{ background-color:green; } /*ID选择器*/ #cang{ color:red; } /*类选择器*/ .riben{ background-color: blue; } /*父子选择器*/ ul li{ color: white; } /*通配选择器*/ ul>*{ background-color:gray; } /*子元素选择器*/ ul>li{ color: black; } /*相邻兄弟选择器*/ #shui+li{ background-color: lightgreen; } /*选择全部兄弟*/ #shui~li{ background-color: lightgreen; } </style> </head> <body> <ul type="none"> <li id="cang">苍老师</li> <li class="riben">波多野结衣</li> <li class="riben">早乙女露依</li> <li>小川阿佐美<li> <li>大桥未久</li> <li>樱井莉亚</li> <li id="shui">水菜丽</li> <li>北野望</li> <li>桃谷绘里香</li> <li>上原瑞穗</li> <li>天海翼</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> /*选中所有有id属性的元素*/ *[id]{ color:red; } /*根据属性的名和值来选*/ li[class="riben"]{ background-color: red; } /*选择class属性中包括all单词的元素*/ li[class~="all"]{ color:blue; } /*选择以"al"开头的类样式的元素*/ li[class ^="h"]{ background-color: red; } /*选择以"n"结尾的类样式的元素*/ li[class$="n"]{ color: blue; } /*选择包含e的类样式的元素*/ li[class*="e"]{ background-color: lightblue; } </style> </head> <body> <ul type="none"> <li id="cang">苍老师</li> <li class="riben">波多野结衣</li> <li class="all riben">早乙女露依</li> <li class="riben all">小川阿佐美<li> <li>大桥未久</li> <li>樱井莉亚</li> <li id="shui">水菜丽</li> <li>北野望</li> <li class="hhaa">桃谷绘里香</li> <li class="hhpn">上原瑞穗</li> <li>天海翼</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业: