lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * 通配符选择器 匹配全局 */
        * {
            list-style: none;
            text-decoration: none;
            font-size: 40px;
        }

        /* id选择器 */
        /* 类选择器
            body: 
                class='xxx'
            style:
                .xxx{样式}
        */
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }

        /* 标签选择器 */
        /* h1 {
            color: pink;
        } */

        /* 包含选择器 / 后代选择器 */
        .main span {
            color: red;
        }

        /* 群组选择器 */
        /* h2,
        h4 {
            color: purple;
        } */

        /* 伪类选择器 */
        /* ul li:first-child {
            color: red;
        }
        ul li:last-child {
            color: blue;
        } */
        /* 
            偶数：2n even
            奇数：2n+1 odd
         */
        /* ul li:nth-child(odd) {
            color: yellow;
        }

        ul li:hover {
            color: #0f0;
        } */

        /* 伪元素选择器
            ::after :after
        */
        .news::after {
            content: "大家好";
            color: #0f0;
        }

        .news::before {
            content: "你好";
            color: rgb(115, 0, 255);
        }

        /* 相邻选择器 + */
        /* h3+h4 {
            color: rgb(0, 38, 255);
        }   */
        /* 兄弟选择器 ~ */
        /* h1~h3 {
            color: rgb(0, 38, 255);
        }

        h1~.hello {
            color: rgb(0, 255, 106);
        }

        h1~.vase {
            color: rgb(255, 213, 0);
        } */
        /* !important */
        h1 {
            color: red !important;
        }

        h1 {
            color: rgb(0, 255, 119);
        }
        /* 属性选择器
            body：
                属性中添加xxx
            style
                [属性=xxx]{样式}
        */
        img[alt='aaa'] {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/img01.gif" alt="aaa">
        <div class="hi">
            <h1>11111</h1>
            <h2>22222</h2>
            <h3>33333</h3>
            <h4>444444</h4>
            <h5>5555</h5>
            <div class="hello">大家好</div>
            <div class="vase">aaaaa</div>
        </div>
        <ul>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
            <li><a href="">哈哈哈</a></li>
        </ul>
        <!-- <div class="news">哈哈哈哈</div>
        <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
        <h2>111</h2>
        <div class="main">
            <span>hello</span>
        </div>
        <div class="box"></div>
        <h1>你好</h1>
        <h4>呃呃问问</h4> -->
    </div>
</body>

</html>