selector0314

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width 50%, initial-scale=1.0">
  7.     <title>上下文选择器</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <h2 class="header">前端开发</h2>
  12.         <p class="explain">第三节课，主要讲了3个标签，CSS基础和选择器。</p>
  13.     </div>
  14.     <div>
  15.         <p class="title">标签</p>
  16.         <ul class="list">
  17.             <li class="item">video标签：
  18.                 <ul class="list2">
  19.                     <li class="item">src="aaa.mp4视频路径及名称"</li>
  20.                     <li class="item">width="300屏幕宽度"</li>
  21.                     <li class="item">controls控制器选项</li>
  22.                     <li class="item">muted静音选项</li>
  23.                     <li class="item">autoplay自动播放选项</li>
  24.                     <li class="item">loop循环播放选项</li>
  25.                     <li class="item">poster="bbb.jpg封面图片"</li>
  26.                 </ul>
  27.             </li>
  28.             <li class="item">audio标签：
  29.                 <p class="explain">属性设置与video类似</p>
  30.             </li>
  31.             <li class="item">iframe标签：
  32.                 <p class="explain">主要用途是网页嵌套，由两个元素组成。</p>
  33.                 <span>元素a标签:
  34.                     <ol class="list2">
  35.                         <li class="item">href属性</li>
  36.                         <li class="item">target属性，几个a标签的target属性相同。</li>
  37.                     </ol>
  38.                 </span>
  39.                 <span>元素iframe:
  40.                     <ol class="list2">
  41.                         <li class="item">srcdoc="可放p标签作为提示语"</li>
  42.                         <li class="item">frameborder="3"边线</li>
  43.                         <li class="item">width="400"窗口宽</li>
  44.                         <li class="item">height="300"高</li>
  45.                         <li class="item">name="与a标签的target相同"</li>
  46.                     </ol>
  47.                 </span>
  48.             </li>
  49.         </ul>
  50.     </div>
  51.     <div>
  52.         <p class="title">CSS基础</p>
  53.         <ul class="list">
  54.             <li class="item">元素=标签+属性</li>
  55.             <li class="item">元素来源预定义（浏览器默认），自定义（用户自己写的），继承样式（用于简化文本）</li>
  56.             <li class="item">自定义样式中，带！important属性优先级最高，接下来依次是行内属性ele.style、文本属性,style、外部样式ccc.css</li>
  57.         </ul>
  58.     </div>
  59.     <div>
  60.         <p class="title">选择器</p>
  61.         <ul class="list">
  62.             <li class="item one">父子：
  63.                 <p style="font-size: 5px;">用法是加`>`，仅限于父子有效</p>
  64.             </li>
  65.             <li class="item">后代：`空格`,（后级所有元素，包括他们的下级）</li>
  66.             <li class="item">兄弟：`+`，（相邻的下一个同级元素，紧跟且只有一个</li>
  67.             <li class="item">同级：`~`，（与当前元素同级的后面全部元素</li>
  68.         </ul>
  69.     </div>
  70.     <style>
  71.         /* // 兄弟 */
  72.         .header+.explain{
  73.             color: rgb(119, 119, 120);
  74.             font-size: 10px;
  75.             font-family: 'Courier New', Courier, monospace;
  76.         }
  77.         /* // 父子 */
  78.         .list>.item{
  79.             border:1px solid black;
  80.             background: rgb(247, 245, 245);
  81.         }
  82.         /* // 同级 */
  83.         .title~.item{
  84.             color: green;
  85.         }
  86.         /* // 父子 */
  87.         .list2>.item{
  88.             color: lightblue;
  89.         }
  90.         /* // 父子 */
  91.         .list>.item.one{
  92.             color: red;
  93.             font-weight: bold;
  94.         }
  95.         /* // 后代 */
  96.         .item .explain{
  97.             font-size: smaller;
  98.             font-style: italic;
  99.         }
  100.     </style>
  101. </body>
  102. </html>

选择器0314

总结：

CSS和选择器的练习很费时间，不知不觉就好几个小时，如果文档不多，很多时候父子和后代的效果是一样的，需要多练习。

【文章原创作者：日本多ip站群服务器 http://www.558idc.com/japzq.html欢迎留下您的宝贵建议】
更多阅读