lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!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;
            background: #00f;
        } */
      /* 2.id选择器 */
      #one {
        color: red;
      }
      /* 3.类选择器 */
      .two {
        color: blueviolet;
        font-weight: bold;
        background: #fff;
      }
      /* 4.包含选择器 后代选择器 */
      ul li {
        color: red;
      }
      /* 4.伪类选择器 
            :first-child  第一个子类
            :last-child 最后一个子类
            :nth-child(n) 第n个子类
            even 偶数 2n
            odd 奇数 2n+1
            :hover 滑过
        */
      ul li:first-child {
        color: #00f;
      }
      ul li:last-child {
        color: #00f;
      }
      ul li:nth-child(2n + 1) {
        color: pink;
      }
      a {
        text-decoration: none;
      }
      ul {
        list-style: none;
      }
      ul li a {
        color: #000;
      }
      /* ul li a:hover {
            color: red;
        } */
      ul li:hover {
        background-color: red;
      }
      ul li:hover a {
        color: #ff0;
      }
      /* 5.子类选择器 */
      p > span {
        color: red;
      }
      .aaa > #bb {
        color: #ff0;
      }
      /* 6.属性选择器
            标签名[属性名='属性值'] {}
         */
      img[alt="www"] {
        width: 200px;
        height: 200px;
      }
      /* 
            7.伪元素选择器
            ::before ::after
            一定是搭配着content使用
            ::after与:after有什么区别?
            css3      css2 语法区别
         */
      #news {
        font-size: 30px;
        font-weight: bold;
        color: purple !important;
        color: red;
      }
      #news::after {
        content: "哈哈哈哈";
        color: #ff0;
      }
      #news::before {
        content: "哈哈哈哈";
        color: #ff0;
      }
      #new {
        width: 400px;
        height: 600px;
        background: #fff;
        border: 2px solid #f00;
      }
      /* 8.相邻选择器 + 修改的是后一个选择器的样子 */
      /* #new h1 + h2 {
            color: red;
         }
         #new h1 + h3 {
            color: plum;
         } */
      /* 9.~ 兄弟选择器 修改的是 后一个选择器的样子 */
      #new h1 ~ h2 {
        color: red;
      }
      #new h1 ~ h5 {
        color: red;
      }
      #new h1 ~ h1 {
        color: blue;
      }
      /* 10.* 通配符选择器 匹配全局 */
      * {
        font-size: 20px;
      }
      /* 11. 群组选择器用逗号连接*/
      #new h3,h4,h6 {
        color: palegreen;
      }
    </style>
  </head>
  <body>
    <div></div>
    <p id="one">你好</p>
    <div class="two">哈哈</div>
    <ul>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
      <li><a href="">哈哈</a></li>
    </ul>
    <a href="">你好</a>
    <p>
      <span> 哈哈哈哈 </span>
    </p>
    <div class="aaa">
      <h1 id="bb">哈哈哈哈p</h1>
    </div>
    <img src="../day2/img01.gif" alt="" />
    <img src="../day2/img01.gif" alt="www" />
    <p id="news">今天天气真好</p>
    <div id="new">
      <h1>哈哈哈哈1</h1>
      <h2>哈哈哈哈2</h2>
      <h3>哈哈哈哈3</h3>
      <h4>哈哈哈哈4</h4>
      <h5>哈哈哈哈5</h5>
      <h6>哈哈哈哈6</h6>
      <h1><span> 哈哈哈哈1 </span><span> 哈哈哈哈1 </span></h1>
    </div>
  </body>
</html>