Il existe 7 types de sélecteurs composés : 1. Le sélecteur union, qui est composé de plusieurs sélecteurs reliés par des virgules, utilisé lors de la définition du même style CSS pour plusieurs éléments 2. Le sélecteur descendant, la syntaxe « E F », peut sélectionner le ; descendants d'un élément ou d'un groupe d'éléments ; 3. Le sélecteur d'élément enfant, syntaxe "E>F", peut sélectionner des éléments qui sont des éléments enfants d'un certain élément ; 4. Sélecteur de pseudo-classe, etc.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

CSS propose sept types de sélecteurs composés : sélecteur d'intersection, sélecteur d'union, sélecteur de descendant, sélecteur d'élément enfant, sélecteur de frère adjacent, sélecteur de pseudo-classe et sélecteur de pseudo-élément.

Sélecteur composé CSS

Un sélecteur composé est composé de deux ou plusieurs sélecteurs de base, combinés de différentes manières, afin de sélectionner des balises d'éléments cibles plus précises et plus précises.

Sélecteur d'intersection

Le sélecteur d'intersection se compose de deux sélecteurs, le premier est le sélecteur d'étiquette, le second est le sélecteur de classe (ou sélecteur d'identifiant), les deux sélecteurs Il ne peut y avoir d'espace entre eux , tel que h3.special.

Conseil mémoire :

Le sélecteur d'intersection est et signifie. La signification de...et...par exemple :

p.one 选择的是： 类名为 .one 的 段落标签

est relativement rarement utilisée et n'est pas recommandée.

Sélecteur d'unionLe sélecteur d'union (regroupement de sélecteurs CSS) est composé de chaque sélecteur connecté par

, toute forme de sélecteur (y compris le sélecteur d'étiquette, le sélecteur de classe, le sélecteur d'identifiant, etc.), peut être utilisé dans le cadre du sélecteur de syndicat. Si les styles définis par certains sélecteurs sont exactement les mêmes, ou partiellement identiques, vous pouvez utiliser le sélecteur d'union pour définir le même style CSS pour eux.Conseils de mémoire :

Union des sélecteurs et des moyens, tant qu'ils sont séparés par des virgules, tous les sélecteurs exécuteront les styles suivants.

Par exemple,

.one, p , #test {color: #F00;}

signifie que les trois sélecteurs.oneetpet#testexécuteront la couleur rouge.

.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

比如：

.demo > h3 {color: red;}

说明：h3一定是demo亲儿子；demo元素包含着h3。

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素

选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 :

h1 + p {margin-top:50px;}

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如可以选择 第1个，第n个元素。

类.one类选择器是一个点

伪类:link用 2个点 就是 冒号

链接伪类选择器

• :link /* 未访问的链接 */

• :visited /* 已访问的链接 */

• :hover /* 鼠标移动到链接上 */

• :active /* 选定的链接 */

  注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序

结构(位置)伪类选择器（CSS3)

• :first-child选取属于其父元素的首个子元素的指定选择器
• :last-child选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n)匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n)选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  n 可以是数字、关键词或公式

目标伪类选择器(CSS3)

:target

:target { color: red; font-size: 30px; }

div::befor { content:"开始"; } div::after { content:"结束"; }

:target { color: red; font-size: 30px; }

div::befor { content:"开始"; } div::after { content:"结束"; }

结构上的第一个p元素
   
Welcome to My Homepage
  
This paragraph is not the first child of its parent.
 
  
父div的第一个p元素
   
第二个
 
 
 注意: :first-child作用于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明. 

p:first-child // 匹配的是其父元素的第一个子元素，可以说是结构上的第一个子元素 h1:first-child // 匹配不到，h1的父元素的第一个子元素是p，不是h1 div:first-child // 匹配不到，div的父元素的第一个子元素是p，不是div p:first-of-type // 匹配其父元素的所有p元素中的第一个元素 h1:first-of-type // 匹配其父元素的所有h1元素中的第一个元素 div:first-of-type // 匹配其父元素的所有div元素中的第一个元素