lovecoding
/
VIP30


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!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>
    /* 通配符选择器 匹配全局样式 */
       * {
        cursor: pointer;
        list-style: none;
        text-decoration: none;
       }
      /* 标签选择器
           格式：标签名称{...}
        */
      div {
        width: 500px;
        height: 500px;
        background: purple;
        /* color: aqua; */
        text-align: center;
        /* line-height: 200px; */
      }
      div p {
        color: #ff0;
      }
      /* 
        id选择器：
            在body标签中：<标签 id="名字1"></标签>
            在样式表中：#名字1：{....}
      */
      #other {
        color: #0f0 !important;
      }
      #other {
        color: #00f;
      }
      /* 
        类选择器：
            在body标签中：<标签 class="名字1"></标签>
            在样式表中：.名字1：{....}
      */
      .vase {
        color: #f00;
      }
      /* 后代选择器/包含选择器 */
      div ul {
        list-style: none;
      }
      div ul li {
        color: #ff0;
      }
      /* 
      伪类选择器
        :hover 鼠标滑过效果
        :nth-child() 自定义子元素 
            odd 2n+1 奇数项
            even 2n  偶数项
        :first-child 第一个子元素
        :last-child  最后一个子元素
      */
      div ul li:hover {
        color: #fff;
        /* 鼠标变小手 */
        /* cursor: pointer; */
      }
      div ul li:nth-child(odd) {
        color: #0f0;
      }
      div p:nth-child(3) {
        color: #00f;
      }
      div ul li:last-child {
        color: #f00;
      }
      div ul li:first-child {
        color: #f00;
      }
      .news {
        width: 100%;
        /* auto 自适应 */
        height: auto;
      }
      /* 群组选择器：由逗号隔开 */
      .news span,
      i,
      b {
        color: aqua;
      }
      .main {
        width: 600px;
        height: 900px;
        background: #00f;
        color: #fff;
      }
      /* 相邻选择器 由+连接 改变的是加号后的标签 */
      .main h2+h3 {
        color: #f00;
      }
      .main h1~.aaa {
        color: #ff0;
      }
      /* 兄弟选择器 用~连接 */
      .aaa {
        width: auto;
        height: auto;
      }
      /* 伪元素选择器
           前 ::before {
                content:""
           }
            
           后 ::after {
                content:""
           } 
            
      */
      .word::before {
        content: "明天下大雪";
        color: #f00;
      }
      .word::after {
        content: "在家吃火锅 你们上早八";
        color: #0f0;
      }
      /* 子类选择器 用>连接 */
      .main>p {
        color: orange;
      }
      /* 
        属性选择器
           格式：标签名[标签属性='xxx']{...}
      */
      img[alt='www'] {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>这是第一个选择器</p>
      <p id="other">这是第一个选择器2</p>
      <p class="vase">这是第一个选择器</p>
      <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
        <li>无序列表6</li>
      </ul>
      <div class="news">
        <span> 我的名字 </span>
        <b>叫</b>
        <i>图图</i>
      </div>
    </div>
    <div class="main">
        <h1>我家住在翻斗花园</h1>
        <h2>我上翻斗幼儿园</h2>
        <h3>喜羊羊</h3>
        <h4>哆啦A梦</h4>
        <h5>海绵宝宝</h5>
        <div class="aaa">
            4444444
            <h5>33333</h5>
        </div>
        <p class="word">这是一段新文字</p>
        <img src="../day1/images/1.jpg" alt="www">
    </div>
  </body>
</html>