CSS不同的选择器的使用

1.标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

 1. 标签名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

 2. 元素名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

如：

div {
    height: 50px;  /* div盒子高度50px */
    width: 50px;  /* div盒子宽度50px */
    background-color: red;   /* 盒子背景颜色为red */
}

优点：快速为页面中同类型的标签统一样式

确定：不能设计差异化样式 

某一类标签全部选择出来 如：div span

2.类选择器

类选择器使用“.”（英文点号）进行表示，后面紧跟类名，如：

.类名 {属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }

注：标签调用时 class="类名" 就可

如：

.nav {
    float: left;
    list-style: none;
    margin:0 10px;
}

 优点：为元素对象定义单独或相对的样式（可以选择一个或多个标签）

 

3.多类名选择器

给标签指定多个类名，达到更多选择的目的

注意：1.样式显示效果跟HTML元素的类名先后顺序没有关系，受CSS样式书写的上下顺序有关

           2.各个类名中间用空格隔开

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

4.id选择器

id选择器使用“#”进行表示，后面紧跟id名

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 id名为HTML元素的id属性值，大多数HTNL元素都可以定义id属性，元素的id是唯一的

5.通配符选择器

通配符选择器用“ * ”号表示，作用范围最广，能匹配页面中所有的元素

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 常用于清除所有HTML标记的默认边距，如：

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}