作业内容

实例演示css规则的三种引入到html文档中的方式;
实例演示标签选择器，class选择器,id选择器,上下文选择器，结构伪类选择器，重点是结构伪类选择器

演示地址: https://php.gzj2001.com/day5/index.html

效果展示

作业代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1215作业内容</title>
    <style>
        /* 1.内联样式 */
        h1 {
            background: lightseagreen;
        }
        /* 属性选择器 */
        .class{
            background: #777;
        }
        /* id选择器 */
        #id{
            background-color:#548;
        }
        /* 后代选择器 */
        span p{
            background-color: mediumaquamarine;
        }
        /* 子元素选择器 */
        span>span{
            background-color: #6998;
        }
        /* 同级相邻选择器 */
        .class + p{
            font-style: oblique;
        }
        /* 同级所有选择器 */
        #id ~ span {
            font-size: 36px;
        }
        /* 结构伪类选择器 */
        /* 选择第一个 */
        ul li:nth-of-type(1){
            background-color: mediumaquamarine;
        }
        /* 选择最后一个 */
        ul li:nth-last-of-type(1){
            background-color: red;
        }
        /* 选择偶数 */
        ul li:nth-of-type(even){
            font-size: 24px;
        }
        /* 选择单数 */
        ul li:nth-of-type(odd){
            font-size: 12px;
        }
        /* 选择第N个 */
        ul li:nth-of-type(3){
            border: 1px solid #548;
        }
    </style>
    <!-- 2.外部样式 -->
    <link rel="stylesheet" href="css/1215.css">
</head>
<body>
    <h1>1.欢迎来到城南博客作业展示！【内联样式】</h1>
    <p>2.我的博客是gzj2001.com【外部样式】</p>
    <!-- 3.style定义属性样式 -->
    <p style="background: magenta;">3.祝您腰好腿好身体好！【style属性定义】</p>
    <p class="class">4.我是属性选择器class的结果</p>
    <p id="id">5.我是id选择器/8.我是同级相邻选择器</p>
    <hr>
    上下文选择器
    <span>
        <p>6.后代选择器/9.同级所有选择器</p>
        <p>6.后代选择器/9.同级所有选择器</p>
        <p>6.后代选择器/9.同级所有选择器</p>
        <span>7.子元素选择器</span>
    </span>
    <br>
  <hr>
  结构伪类选择器
  <ul>
      <li>1结构伪类选择器</li>
      <li>2结构伪类选择器</li>
      <li>3结构伪类选择器</li>
      <li>4结构伪类选择器</li>
      <li>5结构伪类选择器</li>
      <li>6结构伪类选择器</li>
  </ul>
</body>
</html>

其他信息

My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

【Mysql】使用宝塔面板搭建并管理数据库服务器

2020-08-18 19:16:25