实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第五次作业</title> <style type="text/css"> /*元素选择器*/ ul { padding:5; margin:0; width:500px; background-color: skyblue; } li { list-style:none; } /*id选择器 */ #top1 { background-color:red; } /*类选择器*/ .green { background-color:lightgreen; } /*父子选择器*/ ul li { color:blue; } /*通配符选择器*/ ul * { border:1px solid; } /*子元素选择器*/ ul >li{ backgrond-color:blue; } /*根据属性名和值修改*/ li[class="red"] { background-color:red; } /*根据属性名来选择*/ *[id] { background-color: yellow; } /*选择属性中包含t的类样式元素*/ li[class *="t"] { background-color:yellowgreen; } </style> </head> <body> <ul > <li id="top1">子鼠</li> <li class="green">丑牛</li> <li class="green">寅虎</li> <li>卯兔</li> <li class="red">辰龙</li> <li>巳蛇</li> <li class="red">午马</li> <li>未羊</li> <li>申猴</li> <li id= "top2">酉鸡</li> <li id="top3">戌狗</li> <li>亥猪</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例