lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!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>
        /* 1.标签选择器 */
        div {
            width: 200px;
            height: 200px;
            border:1px solid #f00;
        }
        /* 2.id选择器 */
        #aa {
            color: yellowgreen;
        }
        /* 3.类选择器 */
        .bb {
            color: aqua;
        }
        /* 4.伪类选择器 */
        .bb:hover {
            color: purple;
        }
        /* 5.包含选择器 后代选择器 */
        ul li {
            color: blue;
        }
        /* 6.群组选择器 逗号连接*/
        #aa,.bb {
            color: red;
        }
        /* 7.相邻选择器 + */
        h3 + h4 {
            color: red;
        }
        /* 8.~ 兄弟选择器 */
        h2~h5 {
            color: yellowgreen;
        }
        /* 9.子类选择器 > */
        ul li>a {
            color: purple;
        }
        /* 10.伪元素 
            ::after 在..后
            ::before 在..前
            content

            :after :before 与::after ::before区别
            没有实际意义区别 就是一个是css2的写法 一个css3的写法
        */
        .new::before {
            content: "哈哈哈哈";
            color: #0f0;
            font-size: 30px;
        }
        /* 11.通配符选择器 匹配全局：* */
        * {
            list-style: none;
            text-decoration: none;
        }
        span {
            color:red !important;
        }
        span {
            color: yellowgreen;
        }
        /* 12.属性选择器 
            标签[属性=xxx] {
                
            }
        */
        /* img {
            width: 200px;
        } */
        img[alt=aaa] {
            width: 200px;
        }
    </style>
</head>
<body>
    <img src="../html/images/img01.gif" alt="aaa">
    <span>这是哈哈哈</span>
    <div></div>
    <div class="new">这是一段新内容</div>
    <ul>
        <li><a href="">aa</a></li>
        <li><a href="">aa</a></li>
        <li><a href="">aa</a></li>
    </ul>
    <p id="aa">这是一段话</p>
    <p class="bb">这是自我介绍</p>
    <h1>111</h1>
    <h2>222</h2>
    <h3>333</h3>
    <h4>444</h4>
    <h5>555</h5>
    <h6>666</h6>
    <ul>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
        <li><a href="">ppp</a></li>
    </ul>
</body>
</html>