Introduction to CSS（1）- Selector

2018-04-20 本文已影响13人 sunboximeng

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 {}

Pseudo-class selectors

适用情形：根据用户的动作进行渲染，即提供一定的视觉效果；简单的选择器组合选择不到的目标（比如：nth-child）。
语法：selector: pseudo-class {}
例如：

a:link {color:gray;} /*链接没有被访问时前景色为灰色*/

a:visited /* 已访问的链接 /
a:hover / 鼠标划过链接 /
a:active / 按下去的链接 */

Introduction to CSS（1）- Selector

Basic selectors（3种）

扩展选择器

Pseudo-class selectors

猜你喜欢

热点阅读