css选择器的使用详解

-、css选择器的分类:

二、常用选择器详解:

  1、标签选择器:

  语法:

    标签名 {

      属性:属性值;

    }

  代码示例:

    h1 {

      color: #ccc;

      font-size: 28px;

    }

  2、类选择器:

   语法:

    .类名 {

      属性:属性值;

    }

   代码示例:

    .top {

      margin-top:25px;

    }

    <div class="top"></div>

  3、id选择器:

   语法:

    #ID名称 {

      属性:属性值;

    }

   代码示例:

   #top {

    padding-top:10px;

   }

   <div id="top"></div>

  注意:ID属性是唯一标识。

  4、伪类

   语法:

   元素:伪类 {

    属性:属性值;

   }

   代码示例:

   a:link {

    color:blue;

    }

  5、并集选择器:

   语法:

   标签名,.类名,#ID名称 {

    属性:属性值;

   }

   代码示例:

   p,.top,#title {

    color:red;

   }

  6、后代选择器:

   语法:

   p span {

     属性:属性值;

   }

三、通用选择器详解:

   语法:

  *{

   属性:属性值;

  }

四、高级选择器详解:

  1、子选择器:

    代码示例:

    #nav>li {

      padding-left: 20px;

    } 

  2、相邻同胞选择器:

    代码示例:

    h2+p {

      font-size: 1.4em;

    }

  3、属性选择器:

    代码示例:

    [id="header"] {

      background: url(branding-color.png) repeat-y left top;

    }

    a[rel="nofollow"] {

      padding-right: 20px;

    }

五、样式的优先级(权重):

  基本选择器之间:ID选择器〉类选择器〉标签选择器

  样式表之间:  行内样式〉内嵌样式〉外部样式

  css样式之间:  同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明

原文地址:https://www.cnblogs.com/john-sr/p/5692394.html