CSS3之选择器

一、基本选择器

基本选择器是css中使用最频繁、最基础，也是css中最早定义的选择器。

通配符选择器

通配符选择器用来选择所有元素，也可以选择某个元素下的所有元素。

例如：类名为demo下的所有元素

二、层次选择器

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。

E+F和E~F的区别是E和F都是同辈元素，E+F选择的是E元素后面的一个兄弟元素，E~F选择的是E元素后面的所有兄弟元素。

三、动态伪类选择器

css3的伪类选择器可以分成六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定伪类选择器。

动态伪类并不存在于HTML中，只有当用户和网站交互时才能体现出来，动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类。

锚点伪类的设置须遵守的规则："link-visited-hover-active"。

四、目标伪类选择器

目标伪类选择器":target"用来匹配文档的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号（#），后面带有一个标识符名称，例如"#contact"。在Web页面中，一些URL拥有片段标识符，由一个井号后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。"target"伪类选择器选取链接的目标元素，然后供定义样式。

注意：目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。

示例代码：

css部分

html部分

五、语言伪类选择器

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从css指定。

为文档指定语言有两种方法：

（1）如果使用html5，可以直接设置文档的语言

（2）手工在文档中指定lang属性，并设置对应的语言值

语法：

表示选择匹配E的所有元素，且匹配元素指定了属性，而且其值为。

示例：

也可以通过这种方法为不同语言版本的网站相关元素设置不同的样式，例如改变网站页面的字号、设置不同的背景图片等。

六、UI元素状态伪类选择器

UI元素状态伪类选择器主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表达页面更具个性与品味，使用户操作页面表单更便利和简单。

UI元素状态伪类选择器语法

UI元素的状态一般包括启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。

示例代码：

七、结构伪类选择器

结构伪类都是基于HTML文档结构树的，也称作文档对象模型（DOM）。文档树是HTML页面的层级结构，由元素、属性和文本组成。

结构伪类选择器语法结构伪类选择器的n是什么

参数n可以是整数（1、2、3、4）、关键字（odd、even），还可以是公式（2n+1、-n+5），参数n的起始值是1，不是0。

结构伪类选择器的参数按常用的情况划分为七种情形：

（1）参数n为具体的数值

这个数值可以是任何大于0的正整数，例如：:nth-child(3)。

（2）参数n为表达式n*length

选择n的倍数，其中n从0开始计算，而length为大于0的整数。例如：:nth-child(2n)。

（3）参数n为表达式n+length

选择大于或等于length的元素，例如：:nth-child(n+3)。

（4）参数n为表达式-n+length

选择小于或等于length的元素，例如：:nth-child(-n+3)。

（5）参数n为表达式n*length+b

其中b是想设置的偏移值，表示隔length个元素选中第n*length+b个元素，例如：:nth-child(2n+1)。

（6）参数n为关键词odd

选择系列中的奇数元素，其效果等同于:nth-child(2n-1)和:nth-child(2n+1)。

（7）参数n为关键词even

选择系列中的偶数元素，其效果等同于:nth-child(2n)。

:nth-child与:nth-last-child的区别：

:nth-child和:nth-last-child两个选择器的使用方法和所起的作用是一样的，用来选择某父元素中的特定子元素，同时所有的子元素不分类型，而且所有出现的子元素都会按文档流的先后顺序来排序。

:nth-child选择器选择的子元素是从第一个子元素开始算起；

:nth-last-child选择器选择的子元素是从最后一个子元素开始算起。

:nth-child和:nth-of-type的区别：

:nth-child选择的是某父元素的子元素，这个子元素并没有指定确切的类型，同时满足两个条件时才能有效果，其一是子元素，其二此子元素刚好处在那个位置；

:nth-of-type选择的是某父元素的子元素，并且这个子元素是指定类型。

:nth-of-type和:nth-last-of-type的区别

都是用来选择某父元素中指定类型的子元素。

:nth-of-type选择某类型的子元素是从前往后排序计算；

:nth-last-of-type选择的某类型子元素是从后向前排序计算。

八、否定伪类选择器

否定选择器:not()是css3的新增选择器，类似于jQuery中的:not()选择器，主要用来定位不匹配的该选择器的元素。

语法：E:not(F)匹配所有除元素F外的E元素。

例1：选择页面中所有元素，除了footer元素之外

例2：给表单所有input定义样式，除了submit按钮之外

九、伪元素

伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪类一般反映无法在CSS中轻松或可靠地检测到的某个元素属性或状态；伪元素表示DOM外部的某种文档结构。

CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。

（1）伪元素::first-letter

::first-letter用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，例如下沉字母或首字母。

例：制作首字下沉效果

（2）伪元素::first-line

::first-line用来匹配元素的第一行文本，可以应用一些特殊的样式，给文本添加一些细微的区别。

例：制作首行文字效果

最后一个段落的第一行文字显示为红色斜体。

（3）伪元素::before和::after

::before和::after不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。要为伪元素生成内容，还需要配合content属性。

（4）伪元素::selection

::selection用来匹配突出显示的文本。

伪元素::selection仅接受两个属性，一个是background，另一个是color。

十、属性选择器

CSS3属性选择器列表

CSS3常见的通配符

扫码二维码关注我们