首页 > 代码库 > CSS-选择器

CSS-选择器

一、基本选择器

  1、标签选择器:选择给哪个标签加样式,自动指向该标签

      语法:标签选择器{属性名:属性值;属性名:属性值;}

      body{ }  p{ }  div{ }

     2、类选择器:给一类html标签添加样式

      语法:类选择器{属性名:属性值;属性名:属性值;}

      选择器名自己定义,例如<div class="div1"></div>

      .div1{属性名:属性值;属性名:属性值;}(注意引用的时候选择器名前面加.)

     3、id选择器:给特定的html标签添加样式

      语法:id选择器{属性名:属性值;属性名:属性值;}

      选择器名自己定义,例如<div id="div1"></div>

      #div1{属性名:属性值;属性名:属性值;}

      (注意引用的时候选择器名前面加#,id通常给javascript使用,不建议重复)

   4、通用选择器:给所有标签添加样式

      语法:*{属性名:属性值;属性名:属性值;}

二、复合选择器

    1、多元素选择器:多个标签共有的属性和属性值放到一起

      语法:选择器,选择器,选择器,...{属性名:属性值;属性名:属性值;}

   2、后代元素选择器:

      语法:选择器1  选择器2  选择器3{属性名:属性值;属性名:属性值;}

      例如:<div class="num1">

          <ul class="num2">

            <li class="num3"></li>        

          </ul>

         </div>

      .num1  .num2  .num3{属性名:属性值;属性名:属性值;}(为num1里面的num2里面的num3添加样式)

   3、子元素选择器

      语法:选择器>选择器{属性名:属性值;属性名:属性值;}(某个标签的第一层元素)

 

CSS-选择器