lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>选择器</title>
        <style>
            /* 新的样式表会覆盖之前的样式表 */
            /* 标签选择器 */
            /* div {
                width: 300px;
                height: 300px;
                background: #00f;
            } */
            /* h2 {
                color: #ff0;
            } */
            /* 
                id 选择器
                在body标签内的 格式:id="名字(英文)"
                在样式表里   格式:#名字{...}
            */
            #word {
                color: #f00;
            }
            /* 
                类选择器
                在body标签中 格式:class="名字（英文）"
                在样式表里   格式：.名字{...}
            */
            .main {
                color: aquamarine;
            }
            /* 伪类选择器
                :hover 划过效果
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child(数字) 自定义第几个子元素 
                   偶数项 even 2n
                   奇数项 2n+1 odd
            */
            a:hover {
                color: #f00;
            }
            
            /* span {
                color: #00f;
            } */
            /* 包含选择器(后代选择器) */
            p span {
                color: rgb(48, 230, 63);
            }
            ul li:first-child {
                color: #f00;
            }
            ul li:last-child {
                color: #00f;
            }
            ul li:nth-child(odd) {
                color: #ff0;
            }
            /* 
                > 子类选择器
            */
            p>span {
                color: #f00;
            }
            /* 群组选择器： , */
            /* p,span,h2,h3 {
                color: #f00;
            } */
            /* 属性选择器
                格式：
                标签名字[属性="属性值"]{...}
            */
            img[alt="111"] {
                width: 200px;
                height: 200px;
            }
            /* 相邻选择器 + */
            /* 挨着h1的h2标签 */
            /* h1+h2 {
                color: #f00;
            }
            h2+h3 {
                color: #00f;
            }
            h3+h3 {
                color: #0ff;
            }
            h3+h4 {
                color: #ff0;
            }
            h4+h5 {
                color: pink;
            } */
            /* 兄弟选择器 ~ */
            h1~h3 {
                color: #00f;
            }
            h1~h5 {
                color: red;
            }
            h1~h2 {
                color: #ff0;
            } 
            h5~span {
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            这是一个盒子
            <h2>标题</h2>
        </div>
        <p id="word">这是一段内容这是一段内容</p>
        <p class="main">一段新内容一段新内容</p>
        <a href="">音乐</a>
        <a href="">跳舞</a>
        <a href="">书法</a>
        <a href="">画画</a>
        <a href="">唱歌</a>
        <!--  -->
        <p>
            <span>新的行内元素</span>
            <span>新的行内元素</span>
            <span>新的行内元素</span>
            <span>新的行内元素</span>
            <span>新的行内元素</span>
        </p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <img src="../day1/images/img01.gif" alt="111">
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <span>span1</span>
        <div>
            <span>span2</span>
        </div>
        <div>
            <p>123</p>
        </div>
        <span>456</span>
        <h2>456</h2>
        <h3>456</h3>
        <span>456</span>
        <span>456</span>
    </body>
</html>