Web实验3之CSS选择器的运用

来源：互联网发布：应用系统性能优化方案编辑：程序博客网时间：2024/06/14 15:18

实验训练文档：

<!DOCTYPE  html><html  lang="zh-cn"><head><meta charset="utf-8"><title>月光光</title><style type="text/css">       li.first~ul>li{font-size:larger;}       ul#first>li.first+li+li,#last{font-weight:bold;}       li.first~ul>li{color:green}       #last{font-style:italic}       ul#first>li.first~li~li~li{color:blue}  </style></head><body> <h1>月光光</h1> <div>  <ul id="first">    <li class="first">月光光</li>    <li>照地堂</li>    <li>年卅晚</li>    <li>摘槟榔</li>    <li>槟榔香</li>    <li>摘子姜</li>    <li>子姜辣</li>    <li>买萝卜</li>  </ul>  <ul>    <li class="first">萝卜苦</li>    <li>买猪肚</li>    <ul>       <li>猪肚肥</li>       <li>买牛皮</li>    </ul>    <li>牛皮薄</li>    <li>买菱角</li>    <ul >       <li>菱角尖</li>       <li class="last">买马鞭</li>    </ul>  </ul>  <ul>    <li class="first ">马鞭长</li>    <li>起屋樑</li>    <ul>      <li>屋樑高</li>      <li>买张刀</li>      <ul>        <li>刀切菜</li>        <li>买箩蓋</li>      </ul>      <li>箩蓋圆</li>      <li class="last boat">买只船</li>    </ul>  </ul>  <ul>    <li class=" first ">船无底</li>    <li>浸死两个番鬼仔</li>    <li id="last">一个蒲頭</li>    <li>一个沉底</li>   </ul> </div></body></html>

对自己不熟悉而遗落的知识点进行记录，整理：

1. p em   
#c   id选择器
.b     类选择器

2. >    选择子孙元素
+     相邻近的下一个兄弟元素
~     选中后面的全部兄弟元素
，    或运算符
3.遇到的样式中：
em{font-weight:bolder;}
em{color:blue;}
第二个并没有变蓝的效果，但是如果2个调换位置，则变蓝的同时也加粗了。经测试是第二个选择器并没有选中em标签，经助教知道是因为em前面有一个tab符。
4.[title=””] 选中title为那个字符串的标签

0 0