lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!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>
        /* 
            * 匹配全局  通配符选择器
        */
        * {
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }
      /* 标签选择器 */
      div {
        width: 200px;
        height: 200px;
        background: #00f;
      }
      /* id选择器 */
      #part1 {
        background-color: red;
      }
      /* class选择器 */
      .part2 {
        background-color: #ff0;
      }
      /* 包含选择器 后代选择器 */
      #part1 span {
        color: #ff0;
        font-size: 30px;
      }
      /* 伪类选择器
            :hover 滑过
            :first-child 第一个子类
            :last-child 最后一个子类
            :nth-child(n) 自定义子类
            even 偶数 2n
            odd 奇数 2n+1
        */
      ul li:first-child {
        color: red;
      }
      /* 
            伪元素选择器
            ::after/::before {
            content:''
            }
        */
      p::after {
        content: "还在上课";
        color: #00f;
      }
      p::before {
        content: "中午了";
        color: #f0f;
      }
      /* 子类选择器 用>连接 */
      #part1>span {
        color: #0ff;
      }
      /* 群组选择器 用,连接 */
      p,h1 {
        color: pink;
      }
      /* 属性选择器 */
      img[alt='www'] {
        width: 200px;
        height: 200px;
      }
      /* 
        + 相邻选择器
      */
      h3+h4 {
        color: red;
      }
      /* 
        ~ 兄弟选择器
      */
      h2 ~ h3 {
        color: purple;
      }
      h2 ~ h5 {
        color: purple;
      }
      /* 
      !important 优先级：正无穷
      */
      b {
        color: red !important;
      }
      b {
        color: purple;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="part1" class="part2">
        <span> hello </span>
      </div>
      <b>哇哇哇哇哇哇哇哇</b>
      <p>今天星期六</p>
      <ul id="mode1">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
      </ul>
      <ul id="mode2">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
      </ul>
      <ul id="mode3">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
      </ul>
      <a href="">你好</a><a href="">你好</a><a href="">你好</a>
      <h1>哈哈哈</h1>
      <img src="../1.html/images/1.png" alt="www">
      <h2>哈哈哈2</h2>
      <h3>哈哈哈3</h3>
      <h4>哈哈哈4</h4>
      <h5>哈哈哈5</h5>
    </div>
  </body>
</html>