Css选择符

1、通配选择符: **表示所有的对象)

2、元素选择符:指以网页中已有的标签名作为名称的选择符。

例: body {}  h1 {}   p {}

3、群组选择符:指对一组标签进行相同的样式定义。

例:

h1,h2, h3, p {

   font-size:12px;

   font-family:arial;

}

说明:使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方,只需写一次样式

4、关系选择符:

选择符

名称

版本

描述

E F

包含选择符

CSS1

选择所有被E元素包含的F元素

E>F

子选择符

CSS2

选择所有作为E元素的子元素F

E+F

相邻选择符

CSS2

选择紧贴在E元素之后F元素

E~F

兄弟选择符

CSS3

选择E元素所有兄弟元素F

例:<div class="father">

        <div class="son1">

            <a href="#">son1</a>

            <div class="grandson">

                <a href="#">grandson</a>

            </div>

        </div>

        <div class="son2">son2</div>

        <div class="son3">son3</div>

    </div>

   /* 包含选择符 */

    .son1 a{color:red;}

 /* 相邻选择符 */

 .son1+div{color:green;}

    /* 子选择符 */

    .son1>a{color:red;}

/* 兄弟选择符*/

  .son1~div{color:yellow;}

 

5、Idclass选择符

Id选择符:以 "#" 来定义

Class选择符:以 "." 来定义

说明:在网页中,每个id名称中只能使用一次,不得重复。与id 不同,class 允许重复使用。比如页面中的多个元素,都可以使用同一个样式定义。

6、伪类选择符

 

7、属性选择符

 

8、伪对象选择符

 

 

posted @ 2019-03-29 11:44  淡丶影  阅读(213)  评论(0编辑  收藏  举报