lovecoding
/
VIP28


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!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>
        /* 后面的样式会覆盖前面的样式 */
        /* 
            标签选择器
        */
        div {
            width: 300px;
            height: 300px;
            background: #00f;
        }
        p {
            color: #f00;
            font-size: 30px;
            font-weight: bold;
        }
        /* 
            id选择器
            格式：在body标签中 所使用的开始标签内id="名字（英文+数字）"
                  在样式表中  #名字{样式}
        */
        #one1 {
            color: aquamarine;
        }
        /* 
            类/class选择器
            格式：在body标签中 所使用的开始标签内class="名字（英文+数字）"
                  在样式表中  .名字{样式}

        */
        .other {
            font-size: 40px;
            color: aqua;
        }
        p {
            /* 
                display:inline;将块级元素转成行内元素
            */
            display: inline;
        }
        span {
            width: 200px;
            height: 100px;
            background: #f00;
            color: #ff0;
            /* 
                display:block;将行内元素转成块级元素
                display: inline-block; 将元素转成行内块元素
            */
            /* display: block; */
            display: inline-block;
        }
        /* 
            群组选择器 
            格式：用逗号连接
        */
        b,i,u,s,#one1 {
            color: #0f0;
            font-size: 30px;
            font-weight: 900;
        }
        .news {
            background: #fff;
            border: 1px solid #f00;
            color: #00f;
        }
        /* 包含选择器（后代选择器） */
        .news p {
            color: #ff0;
        }
        /* 子类选择器
            格式：>连接
        */
        .news>i {
            color: #00f;
        }
        /* 
            伪类选择器
            :hover 划过
            :first-child 第一个子类
            :last-child  最后一个子类
            :nth-child() 自定义改变
                even 偶数项 2n
                odd  奇数项 2n + 1
        */
        /* ul li:hover{
            color: #f00;
            font-size: 30px;
            font-weight: bold;
        } */
        ul li:last-child {
            color: #f00;
        }
        ul li:first-child {
            color: #0f0;
        }
        ul li:nth-child(odd) {
            color: #00f;
        }
        a:hover {
            color: #fff;
            background: #00f;
        }
        /* 
            属性选择器
            标签名[属性='属性中的值']
            在标签中的属性里去自定义属性值
        */
        img[alt='xxx'] {
            width: 300px;
            height: 300px;
        }
        /* 
            相邻选择器 
            格式：用+连接
        */
        /* h1 + h2 {
            color: #f00;
        }

        h3 + h4 {
            color: #00f;
        }

        h2 + h3 {
            color: #f0f;
        } */
        /* 
            兄弟选择器
            格式：用~连接
        */
        h1~h5 {
            color: #f00;
        }
        h4~h5 {
            color: #ff0;
        }
        h1~h3 {
            color: #00f;
        }
        h1~h6 {
            color: #0f0;
        }
        /* 
            伪元素选择器
            ::after {content:""}
            ::before {content:""}
          面试题：:before与::before区别
          实际意义上没有太大的区别 
          只是写法不同
          :是css2中的写法
          ::是css3中的写法
         */
        .word::after {
            content: '今天';
            color: #00f;
            font-weight: lighter;
        }
        .word:before {
            content: "1111";
        }
        /* 通配符选择器：匹配全局 */
        * { 
            /* 去除无序列表的默认样式 */
            list-style: none;
            /* 去除a标签的默认样式 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="word">一段文字</p>
    <a href="">q我问问</a>
    <a href="">q我问问</a>
    <a href="">q我问问</a>
    <a href="">q我问问</a>
    <div></div>
    <p id="one1">一段文字</p>
    <p class="other">今天天气真好</p>
    <p>行内元素</p>
    <p>块级元素</p>
    <p>行内块元素</p>
    <span>行内元素</span>
    <span>块级元素</span>
    <span>行内块元素</span>
    <b>新的</b>
    <i>旧的</i>
    <u>我的</u>
    <s>他的</s>
    <div class="news">
        <i>今天学了好多东西今天学了好多东西今天学了好多东西今天学了好多东西</i>
        <p>今天学了好多东西今天学了好多东西今天学了好多东西今天学了好多东西</p>
    </div>
    <ul>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
        <li>qqq</li>
    </ul>
    <img src="../images/1.jpg" alt="xxx">
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <div style="background: #ff0;width: 100px;height: 100px;">
        <h6>2222</h6>
    </div>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    
</body>
</html>