CSS部分选择器1

1、标签（元素）选择器

      作用：通过对应的标签名选中内容

      语法：标签名{}

      注意：会波及其他的同标签名的内容

  h1 {
        color: red;
      }

       2、id选择器

      作用：通过id属性值，选中对应的内容

      语法：#id属性值{}

      注意：id属性值不能以数字，汉字开头，而且id属性值不能复用

#p1 {
        color: green;
      }

class选择器

      作用：通过对应class属性值选中内容，跟id选择器很像，不同的是class属性值可重复使用

      语法：.class属性值

      注意：最常用的选择器

.p2{
        background-color: pink;
      }
      .p3{
        color: white;
      }

通配选择器

      作用：选中页面中所有的标签

      语法：*{}

*{
        font-size: 24px;
      }

<h1>登高</h1>
      <h3>杜甫</h3>
      <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
      <p class="p2 p3">无边落木萧萧下，不尽长江滚滚来。</p>
      <p class="p2">万里悲秋常作客，百年多病独登台。</p>
      <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>

交集选择器

       作用： 同时符合选择器1选择器2···对应的内容

        语法： 选择器1选择器2····{}

        注意：如果选择器中有标签选择器，那么标签选择器必须放在第一位

      2、并集选择器（群组选择器）

      在选择器1或者选择器2或者····里面的内容

      语法：选择器1,选择器2,····{}  

.red {
        color: red;
      }
      div.red {
        font-size: 24px;
      }
h1,h3{
        color: orange;
      }

子元素选择器

      作用：通过指定的父元素找到指定的子元素

      语法：父元素>子元素{}

.cs > span {
        color: red;
      }

后代元素选择器

      作用：通过指定的祖先元素找到指定的后代元素

      语法：祖先元素 后代元素{}

.cs span {
        font-size: 30px;
      }

选择下一个兄弟(仅挨着我的)

      作用：通过指定的兄找到紧挨弟弟

      语法：兄+弟{}

p + span {
        background-color: green;
      }

选中指定元素下所有的兄弟

      语法：兄～弟{}

 .xx~span{ 
        background-color: pink;
      }

:link  用来表示未访问过的链接（正常链接）

:visited 用来表示访问过的链接

               由于隐私的原因，所以visited只能改颜色

:hover 用来表示鼠标移入的状态

:active  鼠标点击后的状态  :hover :active 适用所有的标签

  <a href="#">支十慷老，牙间为逃。</a>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.jd.com/">京东</a>
    <a href="https://taobao.com">淘宝</a>
    <p>大但圣九者有皇非尺。</p>

  a:link {
        color: red;
      }
a:visited{
        color: green;
      } 
a:hover{
        font-size: 30px;
        color: red;
      }
  a:active{
        background-color: pink;
      }
p:hover{
        background-color: green;
      }
      p:active{
        color: white;
      }