首页 > 博客列表 > selector0314

博主信息

博文 38

粉丝 0

访问量 31649

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

selector0314

一个好人

原创

504人浏览过

<!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>

选择器0314

总结：

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开通PHP中文网博客第一天

2023-03-08 14:59:36