CSS基本选择器
CSS基本选择器有以下四类:
1.通配选择器
-
作用:选中所有的HTML元素
-
语法:
* { 属性名:属性值; }
-
举例:
* { /*选中所有元素*/ color:orange; font-size:40px; }
这里表示的是选中所有 字体颜色为橙色、大小40px 的字体。
PS:通配选择器一般用来清除样式
2.元素选择器
-
作用:为页面的 某种元素 统一设置样式
-
语法:
标签名 { 属性名:属性值; }
-
举例:
/*选中所有h1元素*/ h1 { color:orange; font-size:40px; } /*选中所有p元素*/ p { color:blue; font-size:60px; }
PS:元素选择器无法实现差异化设置,例如以上代码中,所有h1和p元素的样式都是一样的
3.类选择器
-
作用:根据元素的class值,选中某些元素
-
语法:
.类名 { 属性名: 属性值; }
-
举例
/*选中所有class值为manba的元素*/ .manba { color:purple; } /*选中所有class值为man的元素*/ .man{ color:yellow; }
PS:
1.元素的属性值不带 . 但是类选择器要带
2.class值是自己定义的,请注意不要使用纯数字、中文,尽量使用英文与数字组合,多个单词可以用连字符“ - ”连接,比如 left-menu,命名要有意义,做到见名知意。
3.一个元素不能写多个class属性值,后写的会失效。
4.一个元素的class属性,可以写多个值,必须用空格隔开,例如 class=man what can I say manba out
4.id选择器
作用:根据元素的id属性值,精准定位某个元素
语法:
#id值 {
属性名: 属性值;
}
举例:
/*选中id值为ikun的元素*/
#ikun {
color:grey;
font-size:25px;
}
PS:
id属性值:尽量由字母、数字、下划线、短杠( - )组成,最好以字母开头,不要包含空格,区分大小写。
一个元素只能拥有一个 id 属性,多个元素 id 值不能相同。
一个元素可以拥有 id 与 class 属性。