<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*标签选择器：作用于当前页面的所有匹配的标签*/ li{ color: blue; font-size: 12px; } /*类选择器 作用于当前页面所有class值为red的标签*/ .red{ color: red; } /*id选择器 当前页面具有唯一性*/ #fistline{ color: red; } .ju{ color: #ff7300; font-weight: bold; font-size: 14px; } div{ background-color: #ccc; width: 200px; height: 200px; } /*空格 后代选择器 对选中的标签的所有下级都有作用*/ /*子代选择器 用“>”锁定 */ #ul>li{ color: red; } </style> <title>选择器</title> </head> <body> <ul> <li>家用电器</li> <li class="red">各类书籍</li> <li>手机数码</li> <li class="red">日用百货</li> </ul> <ul> <li id="fistline">家用电器</li><!--fistline:id选择器，当前页面具有唯一性，不准出现相同id--> <li>各类书籍</li> <li>手机数码</li> <li>日用百货</li> </ul> <div > <ul> <li class="ju">家用电器</li> <li>大家电</li> <li>洗衣机</li> <li>电冰箱</li> <li>平板电视</li> </ul> <ul> <li class="ju">日用百货</li> <li>肥皂</li> <li>洗衣粉</li> <li>纸巾</li> <li>洗发水</li> </ul> </div> <ul id="ul"> <li>1</li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
