【H5学习】二、CSS选择器

1、标记名称

使用HTML标记名称当做选择器，可以将HTML文件中所有相同的标记都应用同一种样式，例如：

div { font-size: 16px; color: #FFFFFF;}

2、全局选择器

顾名思义，即选择所有标记。

*{ font-size: 16px; color: #FFFFFF;}

3、Class选择器

在HTML标记中加入Class属性，例如:

<font class="class名称">

.class名称 { font-size: 16px; color: #FFFFFF;}

若想只有多个加入了class属性中的一个应用选择器的样式，可以使用标记名称.class属性名的方法

font.class{font-size: 16px; color: #FFFFFF;}

4、ID选择器

id名称就像身份证号一样，可以唯一的确定一个组件，为id命名时要避免和HTML标记混淆。例如：

#id 属性名 {样式规则;}

#font_bold{font-size:24px;color=#FFFFFF;font-weight:bold;}

5、属性选择器

属性选择属于高级选择，用来筛选标记中的属性，例如想要指定超链接标记的背景颜色为我黄色，但是仅应用于有target属性的组件，这时，就可以用到属性选择器。例如：

a[target] {background-color:yellow;}

属性选择器提供了多种筛选方式：

a[attribute]：只使用属性名，但没有确定任何属性值；

a[attribute = “value”]：指定属性名，并指定了该属性的属性值；

a[attribute~ = “value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；

a[attribute^ = “value”]：指定了属性名，并且有属性值，属性值是以value开头的；

a[attribute$ = “value”]：指定了属性名，并且有属性值，而且属性值是以value结束的；

a[attribute* = “value”]：指定了属性名，并且有属性值，而且属值中包含了value；

a[attribute| = “value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

6、反向选择

例如，如果想选择除了标记以外的其他所有标记，可以使用反向选择“:not”，例如：

:not(a){color:red;}