码迷,mamicode.com
首页 > 其他好文 > 详细

基本选择器

时间:2019-01-10 13:59:52      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:统一   语法   内联   属性选择符   包含   语言   出现   通配符   .class   

一、css选择符:

    概念:选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者是指定名称的元素。

  1.css选择符包括四大类:类型选择符、id选择符、class类型选择符、特殊选择符

    (1)类型选择符:

      语法:元素名称{属性:属性值;}

      说明:类型选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符;

      特点:能够选中页面中所有相同的标签并添加样式

      应用:想统一某一个标签样式的时候

    (2)id选择符

      语法:#id名{属性:属性值}

      说明:当我们使用id选择符时,应先为每个元素定义一个id属性,如<div id="top"></div>

      特点:唯一性(在同一页面中,id名只能出现一次)

      应用:划分网页的外围结构

    (3)class选择符

      语法:.class名{属性:属性值;}

      说明:类选择符的语法格式是:“.”加上定义的class名称,也就是class类选择符;

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

      特点:可以书写一类样式

    (4)群组选择符

      语法:选择符1,选择符2,选择符3{属性:属性值;}

      说明:当多个选择符应用样式相同时,可以将选择符用英文逗号分隔的方式,合并为一组

    (5)包含选择符

      语法:选择符1 选择符2{属性:属性值;}

      说明:选择符1和选择符2之间用空格隔开。含义就是所有选择符1中包含选择符2

    (6)伪类选择符

      a:link{属性:属性值;}未访问状态

      a:visited{属性:属性值;}已访问状态

      a:hover{属性:属性值;}鼠标滑过状态

      a:active{属性:属性值;}鼠标按下状态

    (7)通配符

      语法:*{属性:属性值;} eg:*{margin:0;padding:0;}

      说明:通配选择符的写法是“*”,其含义就是所有元素。

  2.选择符权重

    (1)css中,用四位数表示权重,权重表达方式如:0,0,0,0

      类型选择符权重:0001;

      类(class)选择符权重为:0010;

      ID选择符的权重为:0100;

      伪类选择符的权重为:0010;

      包含选择符的权重为:包含选择符权重之和;

      内联样式的权重为:1000;

‘      通配符权重为:0000;

      伪类选择符的权重为:0001;

      子选择符的权重为:0000;

      属性选择符的权重为:0010;

      继承的样式权重为:0000;

基本选择器

标签:统一   语法   内联   属性选择符   包含   语言   出现   通配符   .class   

原文地址:https://www.cnblogs.com/liufuyuan/p/10249416.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!