CSS选择符归类

一、css样式表的权重关系:

1)内联样式表的优先级别最高;

2)内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高;

3)同在一个样式表中的优先级和书写的顺序也有关,后书写的优先级别高。(被覆盖的只是相同属性的样式)。

二、选择符:

1)类型选择符(标签选择符)

   ①所有的html标签可以直接当作选择符进行应用。

   ②特点:能选中当前结构里面全部同名标签。

   ③应用:想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。

2)id选择符:       

    ①语法:

    ·格式:<标签 id="名称"></标签>

    ·用法:#名称{ 属性:属性值 }   

    ②特点:唯一性!在同一个页面里面,一个id名只能用一次。

    ③应用:来划分网页外围结构

3)类选择符(class选择符)

    ①语法:

      ·格式:<标签 class="名称1 名称2 名称3 名称4..."></标签>

      ·用法 :.名称{属性:属性值;}

    ②特点:

       a:一个元素可以有多个类名,类名可以重复出现

       b:可以制定一类样式.

4)群组选择符:

   ①语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.

   ·选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }

   ·eg :     #box,.con,h3,#wrap{ width:300px; }

5)包含选择符(子代选择器\后代选择符)( 通过父元素找子元素 )

   ① 语法:

         父元素 子元素{ 属性:属性值; }

6) 伪类选择器:

    ① a:link {color: red;}                    /* 未访问的链接状态 */

    ②a:visited {color: green;} /* 已访问的链接状态 */

    ③a:hover {color: blue;}                  /* 鼠标滑过链接状态 */

    ④a:active {color: yellow;}               /* 鼠标按下去时的状态 */

补:hover可以适用于所有标签

7)通配符:

        ①*{  }

        ②* 选择页面中所有的元素!

        ③eg*{

            margin:0;    盒子外围间距清零

            padding:0;   盒子内部的距离清零

        }

 

posted @ 2020-03-30 20:59  油画家的第一站  阅读(197)  评论(0编辑  收藏  举报