Community Learn Tools Library Leisure
search
English
Home > List of blog posts > selector0314
Blogger Information
Blog 38
fans 0
comment 0
visits 22634
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
selector0314
一个好人
Original
299 people have browsed it
  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和选择器的练习很费时间，不知不觉就好几个小时，如果文档不多，很多时候父子和后代的效果是一样的，需要多练习。

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post