12CSS3选择器

[目录]

目录

• [目录]
  • 一、基本选择器
  • 二、属性选择器
  • 三、伪类
  • 四、伪元素

一、基本选择器

1. 子元素选择器
   • 概念：子元素选择器智能选择某元素的子元素
   • 语法格式：父元素>子元素
2. 相邻兄弟元素选择器
   • 概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素
   • 语法格式：元素+兄弟相邻元素
3. 通用兄弟选择器
   • 概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
   • 语法格式：元素~后面所有兄弟相邻元素
4. 群组选择器
   • 概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
   • 语法格式：元素1，元素2，……，元素n

二、属性选择器

对带有指定属性的HTML元素设置样式，使用CSS3属性选择器，可以只指定元素的某个属性，或者还可以同时指定元素的某个属性和其对应的属性值

1. element[attribute]
   • 概念：选择所有带有attribute属性元素
2. element[attribute~="value"]
   • 概念：选择attribute属性包含单词“value”元素
3. element[attribute^="value"]
   • 概念：选择attribute属性值以“value”开头的所有元素
4. element[attribute$="value"]
   • 概念：选择attribute属性值以“value”结尾的所有元素
5. element[attribute*="value"]
   • 概念：选择attribute属性值包含“value”的所有元素
6. element[attibute|="value"]
   • 概念选择attribute属性值为“value”或以“value-”开头的元素

三、伪类

1. 动态伪类
   这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
   • 锚点伪类：:link :visited
   • 用户行为伪类：:hover :active :focus
2. UI元素状态伪类
   • 概念：把":enabled",":disabled",":checked"伪类称为UI元素状态伪类
3. CSS3结构类
   CSS3的:nth选择器也称为CSS3的结构类
   • 选择方法：:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、only-of-type、:empty
4. 否定选择器（:not）
   • 概念：:not(element/selector)选择器匹配非指定元素/选择器的每个元素
   • 语法格式：父元素:not（子元素/子选择器）

四、伪元素

CSS伪元素用于向某些选择器设置特殊效果，语法格式：元素::伪元素

1. element::first-line
   • 概念：根据“first-line”伪元素的样式对element元素的第一行文本进行格式化
   • 说明：“first-line”伪元素只能用于块级元素
2. element::first-letter
   • 概念：用于向文本的首字母设置特殊样式
   • 说明：“first-letter”伪元素只能用于块级元素
3. elemetn::before
   • 概念：在元素的内容前面插入新内容
   • 说明：常用“content”配合使用
   • 特点：第一个元素；行级元素；内容通过content写入；标签中找不到对应的标签
4. element::after
   • 概念：在元素的内容后面插入新内容
   • 说明：常用“content”配合使用，多用于清除浮动
5. element::selection
   • 概念：用于设置在浏览器中选中文本后的背景色与前背景色
   • 说明：::select在IE家族中，只有IE9+版本支持，在FireFox中需要加上其前缀“-moz”