致力于高端网站建设服务的专业公司
网站建设热线:010-51000596
首页 > 网站资讯 > 网站建设 > css详解之选择符、优先级及继承关系

css详解之选择符、优先级及继承关系

选择符

   1、通配符
     语法:*{属性:属性值;}
      说明:通配选择符的写法是“*”,其含义就是所有元素。

      用法:常用于定义文档中各种元素得共同属性,如字号、字体等。
      使用通配选择符的一个示例如下:
      *{font-size:12px;}
       说明:font-size属性是字体的大小、px是像素,该样式实现的效果是:页面中所有文本的字体大小为12个像素 。
   2、类型选择符
  语法:元素名称{属性:属性值;}
  说明:1)类型选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p等。
     2) 所有的页面元素都可以作为类型选择符。

  用法:1)如果想改变某个元素得默认样式时,可以使用类型选择符;
     例:ul{margin:0;
        list-style:none; }
     2) 当统一文档某个元素的显示效果时,可以使用类型选择符;
     例:body{font-size:12px;
         line-height;18px;}

     3、Id选择符
     语法:#id名{属性:属性值;}
  应用:<元素名称id=“id选择符名称"></元素名称
  说明:1)ID选择符的语法格式是“#”加上自定义的ID名称。
     2)当我们使用ID选择符时,应先为每个元素定义一个id属性,如:<div id="top"></div>
     3) 一个id名称只能对应于文档中一个具体得元素对象,因为id只能定义页面中某一个唯一的元素对象;

  用法:1)用来构建整体结构的元素对象应该定义id属性,因为这些对象一般在页面中都是比较唯一、固定的,不会出现一个结构在同一个页面内重复出现得现象,如
      logo、导航等;


    4、class选择符
  语法:.类名{属性:属性值;}
        应用:<元素名称class="类选择符名称"></元素名称> 
        说明:1)类选择符的语法格式是:“.”加上自定义的类名称。

              2)当我们使用类选择符时,应先为每个元素定义一个类属性,如:<div class="red"></div>

  注意:一个标记上可以同时使用多个类,语法为<标记class=“类名 类名”>
       即:在一个标记上同时使用多个类时,类名与类名之间用空格隔开

        ID具有唯一性,CLASS具有普遍性。

    5、群组选择符
      语法:选择符1,选择符2,选择符3{属性:属性值;}
      说明:当多个选择符应用相同的样式,可以将选择符用英文逗号分隔的方式,合并为一组.


      使用类选择符的一个示例如下:
      .name,div,p{font-size:12px}
      该样式实现的效果是在类名字为name的元素、div元素、p元素中,文本的字体大小为12个像
      素。

     6、包含选择符
      语法:选择符1 选择符2{属性:属性值;}
      说明:选择符1和选择符2之间用空格隔开。含义就是所有选择符1中包含的选择符2。


      使用包含选择符的一个示例如下:
      div p{font-size;12px;}
      该样式实现的效果是,在所有被div元素包含的p元素中,文本有字体大小为12个像素。

     7、伪类选择符
      语法:a:link{属性:属性值;}
               a:visited{属性:属性值;}
               a:hover{属性:属性值;}
               a:active{属性:属性值;}
      说明:1)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
                  2)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
                        a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
                  3)a:link可以定义未访问过的超链接样式,有些浏览器会把它解析为任何超链接,包括
                        访问过的和未访问过的,因此,我们可以使用a选择符样式来代替a:link选择符样式。
                  4)使用与超链接相关的伪类选择符时,应为a元素定义href属性;

 

 

CSS的基本书写规范包括:
1. 基本书写顺序 :建议先写通配符、类型选择符和重复使用的样式,然后是伪类,最后是自定义的选择符。除了重复使用的选择符,其他选择符按照使用的先后书写,这样便于修改时寻找。
2. 书写方式
3.注释
注释的语法如下:
/*这是一个注释*/

 

 

优先级

1、直接定义在标记上的css样式(行间样式表)级别最高。
2、内部样式表与外部样式表后设的起作用。
3、当样式中属性重复时,后设的属性起作用

4、ID的定义优先于CLASS的定义

5、类、id的优先级别高于标记

 

继承关系:子定义会继承父定义,但会覆盖父定义的内容。