1、使用CSS基本选择器
基本选择器（basic selector）：使用起来非常简单。
1.1、选择所有元素
通用选择器：匹配文档中的所有元素，包括html和body元素。（使用很少）
<style type="text/css"> * { border: thin black solid; padding: 4px; } </style> 定义的样式：将选中的样式以细黑框包起来。
1.2、根据类型选择元素
元素类型选择器：可以选取一个文档中该元素的所有实例。
<style type="text/css"> a { border: thin black solid; padding: 4px; } </style> a元素的实例设置为黑色边框。
⚠️只需将元素类型用逗号分开即可将某个样式应用到多个元素类型。
1.3、根据类选择元素
类选择器：采用全局属性class匹配指定类的元素。
eg： <style type="text/css"> .class1 { border: thin black solid; padding: 4px; } </style> 选中指定class1的所有类型的元素，设置为黑色边框。
⚠️两种表示形式：
- 使用通用选择器 *.class，易理解
- 不使用通用选择器 .class，常见
- 所有的选择器无非都是有效的过滤器：缩小前面选择器的范围，匹配更少元素。
将与指定类匹配的元素限定为一种类型，可将通用选择器替换为元素类型。
<style type="text/css"> span.class2 { border: thin black solid; padding: 4px; } </style> 缩小了选择器的范围，使它只匹配指定class2的span元素
⚠️如果你想选择器属于多个类的元素，可指定类名（不同类名之间用句号隔开）如：span.class1.class2。
1.4、根据ID选择元素
ID选择器：可根据全局属性id的值选择元素。
因为html文档中元素id属性的值必须唯一，所以只要使用ID选择器，查找的必定是单个元素。
<style type="text/css"> #w3canchor { border: thin black solid; padding: 4px; } </style>
1.4、根据属性选择元素
属性选择器：基于属性的不同方面匹配属性。
使用通用选择器可以匹配具有符合指定条件属性的所有元素（或指定类型的所有元素），更常见的方法：不用通用选择器，而将选择条件放到 [ ] 里。
<style type="text/css"> [href] { border: thin black solid; padding: 4px; } </style> 匹配所有具有href属性的元素，不管具体值是什么。
元素属性选择器的条件：
⚠️处理支持多个值且不同的值用空格分割的属性会用到～=条件，如全局属性class。
<style type="text/css"> [class～="class2"] { border: thin black solid; padding: 4px; } </style> 匹配定义class属性，且class的值包括class2的元素。
⚠️如果是一个属性值包括多条用连字符分割的信息，用=条件。lang全局属性就是一个很好的例子，lang属性可以跟包括区域子标记的语言说明符一起使用。
- en-us 美国英语
- en-gb 英国英语
