lovecoding
/
Vip0525


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!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.标签选择器 */
        b {
            color: red;
        }
        /* 2.id选择器 */
        #first {
            color: #00f;
        }
        /* 3.类选择器 */
        .second {
            color: #0f0;
        }
        /* 4.包含选择器 后代选择器 */
        ul li {
            /* !important 提高样式优先级 */
            color: purple !important;
        }
        /* 5.伪类选择器
            :hover 划过
            ：first-child 第一个子类
            ：last-child 最后一个子类
            ：nth-child(n) 第n个子类
            偶数：even 2n
            奇数：odd 2n+1
        */
        ul li:hover {
            color: #f00;
        }
        /* 6.群组选择器 逗号连接 */
        b,#first,.second {
            color: pink;
        }
        /* 7.+ 相邻选择器 */
        h1 + h2 {
            color: #f00;
        }
        /* 8.~ 兄弟选择器 */
        h2 + h3 {
            color: #f00;
        }
        h1~h3 {
            color: #00f;
        }
        /* 9.子类选择器 > */
        ul > li {
            color: hotpink;
        }
        p {
            color: #0f0;
        }
        /* 10.伪元素选择器
            搭配着content使用
            ::after 在...之后
            ::before 在...之前
            :after与::after有什么区别
            没有任何样式区别 只是一个是css2的语法 一个是css3的语法
         */
        p::after {
            content: "哈哈哈";
            color: #f00;
        }
        p::before {
            content: "哈哈哈";
            color: #f00;
        }
        /* 11.属性选择器
            标签名[属性=属性值]
        */
        img[alt=www] {
            width: 100px;
            height: 100px;
        }
        /* 12.通配符选择器 匹配全局 */
        * {
            list-style: none;
        }
    </style>
</head>
<body>
    <img src="../images/img01.gif" alt="www">
    <br>
    <b>哈哈哈</b>
    <div id="first">1111</div>
    <div class="second">1111</div>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <ul>
        <li style="color:#ff0">aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <p>这是一段文字</p>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>
</html>