0322作业 - CSS学习 - php中文网博客

首页 > 博客列表 > 0322作业

博主信息

博文 19

粉丝 0

访问量 13310

专题推荐

更多>

实例选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id优先级高于类 101*/
        #php2 p {
            color: blue;
        }
        /* 类优先级高于标签 011*/
        .php p {
            color: yellow;
        } 
        p {
            color: red;
        }
        /* 同级，后者覆盖前者 */
        p {
            color: green; 
        }
    </style>
</head>
<body>
    <div class="php" id="php2">
        <p>我爱PHP</p>
    </div>
</body>
</html>

2. 实例演示前端组件样式模块化的原理与实现;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>
####index.css文件
@import url(header.css);
@import url(main.css);
@import url(footer.css);
####header.css文件
header {
    height: 50px;
    background-color: yellow;
}
####main.css文件
main {
    height: 400px;
    background-color: blue;
}
####footer.css文件
footer {
    height: 80px;
    background-color: red;
}

实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类选择器使用方式 */
       /* 选择第一个元素 */
           .list > li:first-of-type {
               background-color: red;
           }
        /* 选择最后一个元素 */
          .list > li:last-of-type {
              background-color: aqua;
          }
       /* 选择第三个元素 */
       .list >li:nth-of-type(3) {
           background-color: blue;
       }
       /* 选择倒数第二个元素 */
       .list > li:nth-last-of-type(2) {
           background-color: cornflowerblue;
       }
    </style>
</head>
<body>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>
</body>
</html>

批改老师：

灭绝师太

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

0628前端作业

2021-07-02 14:41:20