css选择器

一. 简单选择器

    1. 标签选择器

描述：

元素选择器或标签选择器

实例：

 p{
            background-color: tomato;
            width: 10px;
            height:10px;
  }

<p>
        你好
</p>

效果：

     2. ID选择器

描述：

只能在元素中命名的，不能重复使用，#加上ID值定义样式。

 实例：

#one{
            background-color: tomato;
            width: 50px;
            height:50px;
        }

<div id="one">
        你好
</div>

效果 ：

       3. 类名选择器

描述：

可以重复命名可以取多个网页类名，用空格隔开，使用最多

实例：

  .button1{
            width: 120px;
            height: 58px;
            text-align: center;
            color: rgb(20, 19, 19);
            background-color: violet;
            border: white;
        }

<button class="button1">
        你好
</button>

 效果：

二. 伪类选择器

描述

格式：选择器：伪类名{     }伪类选择器。

描述元素的特殊状态，点击时的效果，或者移动时的效果

li：firstˉchild{      }

   first-child同类元素中的第一个元素

   last-child同类元素中的最后一个元素

   nth-child选中列表当中指定的元素

li：nth-child（）

   n表示0到正无穷，全部选中

   2n表示偶数行

   2n+1表示奇数行

实例

  #s2:hover{
            text-decoration:underline;
        }

 <dt id="s2">大家电</dt>

效果：

三. 超链接伪类选择器

描述：

超链接伪类

  a：link{    }未访问过的链接  a标签独有

  a：visited{     }访问过的链接，一般不会修改访问过的链接   a标签独有

  a：hover{    }鼠标移入效果，所有元素都可以使用

  a：active{     }鼠标点击时的效果，所有元素都可以使用