CSS3

CSS3 知识量:11 - 43 - 138

2.2 基本选择器><

基本选择器的语法- 2.2.1 -

基本选择器是CSS最基础的选择器,在CSS1中就已经定义了。

选择器类型说明
*通配选择器选择文档中所有的HTML元素
E元素选择器选择指定类型的HTML元素
#idID选择器选择ID属性值为“id”的任意类型元素
.class类选择器选择class属性值为“class”的任意类型任意多个元素
selector1,selectorN群组选择器将每个选择器匹配的元素集合合并

各浏览器对基本选择器都有很好的支持。

通配选择器- 2.2.2 -

通配选择器(*)用于选择所有元素,也可以选择某个元素的所有子孙元素。

示例:设置所有的元素外边距为0,内边距为0。

*{
    margin: 0;
    padding: 0;
}

示例:设置p元素的所有子元素的字体大小为14px。

p>*{
    font-size: 14px;
}

元素选择器- 2.2.3 -

元素选择器通过DOM元素名称来选择同类元素。

示例:设置所有p元素的字体大小为14px。

p{
    font-size: 14px;
}

示例:设置所有的链接a元素字体颜色为黑色。

a{
    color: #000;
}

ID选择器- 2.2.4 -

ID选择器通过元素的id值来选择某个元素。使用前,必须首先设置元素的id值,同一个页面元素的id值应当是唯一的,因此,通过ID选择器一次只能选择一个元素。

通过#和id属性值的方式来选择具体元素。

示例:设置id值为bob的元素的背景色为白色。

#bob{
    background-color: #fff;
}

类选择器- 2.2.5 -

类选择器通过元素的类(class)属性值选择相应元素。

示例:设置类属性值为ok的元素字体颜色为黑色。

.ok{
    color: #000;
}

示例:设置类属性值为ok的链接元素a的字体颜色为黑色。

a.ok{
    color: #000;
}

群组选择器- 2.2.6 -

如果多个选择器选择的元素具有相同的样式定义,可以将这些选择器集中到一起进行样式定义,从而简化代码,这称之为群组选择器。其中,各选择器之间通过逗号(,)进行分割。

示例:设置a元素、p元素和类属性值为ok的元素的字体大小为14px。

a,p,.ok{
    font-size: 14px;
}