Introduction to CSS（1）- Selectors
程序员文章站
2022-07-12 17:16:09
...
The browser uses its selector API to traverse the DOM (Document Object Model，指的其实就是HTML的树形结构) and pick out the elements matching the selector. CSS 和 JavaScript 都要用到这个selector API来对DOM树的节点进行操作。
CSS代码中，selector里面装的全部都是键值对儿，用于设置HTML元素样式，property name is something that's predefined by CSS specification。例如对文本可以设置的常用属性有：
p {
font-family: Arial, helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 24px;
color: #0000ff;
text-align: right;
}
CSS代码的位置：
- 单独的文件(external stylesheet)
在<head>里面添加<link>标签进行引用 -
<head>标签里面的<style>标签里面
缺点：别的页面就使用不了它的CSS代码 - 标签里面(inline styling)
在标签内使用 style属性 指定css代码
缺点：标签里面的CSS代码无法重用，所以很少写这样的CSS代码，仅仅在测试某个样式的功能时才使用。
浏览器对一些标签，比如<h1>，会有默认的渲染样式，可以用CSS将其覆盖：
h1 {
color: blue;
font-size: 20px;
}
Basic selectors（3种）
- Element selector
HTML中的标签名可以直接作为selector使用。标签名称 {} - Class selector
不同的标签可能具有相同的class属性值。.class属性值 {}
一个标签的class属性可以有多个值，只要用空格分开即可。 - Id selector
#id属性值 {}
扩展选择器
- 通配符选择器
* {} - 属性选择器
标签名称[属性名="属性值"] {} - Selector的组合（扩大选择范围）
把不同选择器用逗号隔开即可。选择器1,选择器2 {} - Selector的嵌套（缩小选择范围）
- 标签名与类嵌套
这种嵌套的形式类似于方法调用。标签名.class属性值 {} - 子选择器
- direct children：
选择器1 > 选择器2 {} - all children：
选择器1 选择器2 {}
- direct children：
- 标签名与类嵌套
Pseudo-class selectors
适用情形：根据用户的动作进行渲染，即提供一定的视觉效果；简单的选择器组合选择不到的目标（比如：nth-child）。
语法：selector: pseudo-class {}
例如：
a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
a:visited /* 已访问的链接 /
a:hover / 鼠标划过链接 /
a:active / 按下去的链接 */