<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width 50%, initial-scale=1.0"><title>上下文选择器</title></head><body><div><h2 class="header">前端开发</h2><p class="explain">第三节课，主要讲了3个标签，CSS基础和选择器。</p></div><div><p class="title">标签</p><ul class="list"><li class="item">video标签：<ul class="list2"><li class="item">src="aaa.mp4视频路径及名称"</li><li class="item">width="300屏幕宽度"</li><li class="item">controls控制器选项</li><li class="item">muted静音选项</li><li class="item">autoplay自动播放选项</li><li class="item">loop循环播放选项</li><li class="item">poster="bbb.jpg封面图片"</li></ul></li><li class="item">audio标签：<p class="explain">属性设置与video类似</p></li><li class="item">iframe标签：<p class="explain">主要用途是网页嵌套，由两个元素组成。</p><span>元素a标签:<ol class="list2"><li class="item">href属性</li><li class="item">target属性，几个a标签的target属性相同。</li></ol></span><span>元素iframe:<ol class="list2"><li class="item">srcdoc="可放p标签作为提示语"</li><li class="item">frameborder="3"边线</li><li class="item">width="400"窗口宽</li><li class="item">height="300"高</li><li class="item">name="与a标签的target相同"</li></ol></span></li></ul></div><div><p class="title">CSS基础</p><ul class="list"><li class="item">元素=标签+属性</li><li class="item">元素来源预定义（浏览器默认），自定义（用户自己写的），继承样式（用于简化文本）</li><li class="item">自定义样式中，带！important属性优先级最高，接下来依次是行内属性ele.style、文本属性,style、外部样式ccc.css</li></ul></div><div><p class="title">选择器</p><ul class="list"><li class="item one">父子：<p style="font-size: 5px;">用法是加`>`，仅限于父子有效</p></li><li class="item">后代：`空格`,（后级所有元素，包括他们的下级）</li><li class="item">兄弟：`+`，（相邻的下一个同级元素，紧跟且只有一个</li><li class="item">同级：`~`，（与当前元素同级的后面全部元素</li></ul></div><style>/* // 兄弟 */.header+.explain{color: rgb(119, 119, 120);font-size: 10px;font-family: 'Courier New', Courier, monospace;}/* // 父子 */.list>.item{border:1px solid black;background: rgb(247, 245, 245);}/* // 同级 */.title~.item{color: green;}/* // 父子 */.list2>.item{color: lightblue;}/* // 父子 */.list>.item.one{color: red;font-weight: bold;}/* // 后代 */.item .explain{font-size: smaller;font-style: italic;}</style></body></html>
总结：
CSS和选择器的练习很费时间，不知不觉就好几个小时，如果文档不多，很多时候父子和后代的效果是一样的，需要多练习。