【前端】-013-页面制作-CSS-选择器

简单选择器，简单选择器可以进行组合

1. 标签（元素）选择器
   标签名{参数:参数值;}
   p{color: red;}

2. 类选择器
   .类名{参数:参数值;}
   .main{font-size: 1.5em;}

3. id选择器
   /#id名{参数:参数值;}
   #nav{background-color: #00FF00;}

4. 通配符选择器
   *指代所有标签，都用某一种样式
   *{color: red;}

5. 属性选择器
   标签名称[属性=属性值]{参数:参数值}

伪类选择器

1. A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. 【表明元素特殊状态的关键字？】
2. 常用的伪类选择器，a标签

- `selector:link{property: value;}`，设置没有访问过的链接的样式
- `:visited{property: value;}`，设置访问过的链接样式，以上只用于a标签
- `:hover{property: value;}`，设置鼠标悬浮的样式，
- `:active{property: value;}`，设置链接点击的样式，以上不仅仅用于a标签

3. 层级包含关系样式

- `selector:first-child{property: value;}`，表示上一层级标签中的第一个子标签元素
- `selector:last-child{property: value;}`，表示上一层级标签中的最后一个子标签元素
- `selector:nth-child(an+b|even|odd){property: value;}`，表示上一层级标签的第n个标签元素，n=An+B|even|odd
- `selector:only-child{property: value;}`，作用于只有一个子元素的标签
- `selector:first-of-type{property: value;}`，表示上一层级中第一selector类型标签元素的样式，标签逐层深入。
- `selector:last-of-type{property: value;}`，表示上一层级中最后一个selector类型标签元素的样式，标签逐层深入。
- `selector:nth-of-type(an+b|even|odd){property: value;}`，表示上一层级中第n个selector标签的样式。
- `selector:only-of-type(an+b|even|odd){property: value;}` ，作用于只有某一种类型的元素。

4. 其他，

- `:enable`
- `:disable`
- `:checked`
- `:empty`
- `:root`
- `not()`
- `target`

……

伪元素选择器

1. *** Pseudo-elements *** are added to selectors , they allow you to style certain parts of a element. 【定义标签某一部分的样式？】

2. 常用的伪元素选择器

• selector::first-letter，第一个字符样式
• selector::first-line，第一行样式
• selector::before，在选择器内容之前插入
• selector::after，在选择器内容之后插入
• selector::selection，定义选中后的内容样式

组合选择器

1. 兄弟选择器

• 相邻兄弟选择器：h2+p{font-size: 2em;}，表示近邻h2标签的第一个p标签设置为2倍字体大小；
• 同级兄弟选择器：h2~p{color: red;}，表示从h2标签后面的每一个p标签字体颜色都为红色。

2. 子选择器：#nav>p{color: red;}，表示id名为nav的标签里面第一层级的p标签字体颜色为红色，其中#nav可用类名/标签名替换。
3. 后代选择器：.nav p{color: red;}，表示class名为nav的标签里面所有层级的p标签字体颜色为红色，其中.nav可用#id名/标签名替换。
4. 多元素选择器，.nav,#main,p{color: red;}，同时匹配多个元素样式，元素可用#id/类名/标签名表示，元素之间用逗号分隔

以上多标签选择器，标签均可使用#id/类名/标签名表示

---

参考文献

1. CSS选择器笔记, http://www.ruanyifeng.com/blog/2009/03/css_selectors.html;
2. jQuery入门笔记之（一）选择器引擎, http://blog.guowenfh.com/2015/12/31/jQuery-01-Sizzle/;
3. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors;
4. HTML+CSS基础课程, http://www.imooc.com/learn/9