css选择器

作者:课课家教育更新于： 2016-09-30 13:38:40

　　之前在文章当中，小编就已经跟大家介绍如何使用css样式的，但是并没有说明为什么这些CSS语句能够控制一些特定的标签。今天，小编将通过这篇文章给大家介绍CSS中的一个重要概念，那就是“选择器”了。在css当中，选择器作为一种模式，可以让我们来选择html文档中的单个标签、一组或是一类标签等等。

　　（一）css选择器概念

　　“css选择器”属于一种模式，然后能够通过这种模式对HTML文档中的单个标签、一组以及一类标签等等进行选择。

　　“css选择器”的格式：

　　（1）要是“内联样式”，那写在style属性后的css语句只可以控制当前标签，例如：

　　（2）要是写在head头部的style标签，或者是用link标签中导入的其他css的文件，其中css选择器的格式为：

　　（二）全局选择器

　　全局选择器可以控制HTML文档当中全部标签的CSS样式，如下例：

　　style.css文件内容：

　　如上图，body当中只有3个可见的标签，那怎么会出现5个绿色边框。事实上，全局属性可能会从HTML文档的首标签开始进行匹配，第一个标签为html，所以给html的文档添加了一个边框，指的就是最外层的边框，出现第二层边框的原因是由于head在浏览器当中是不可见的，所以我们不能看到head的边框，然后，选择器匹配到body标签，就会给整个body都添加了一个绿色边框，再对body当中3个可见标签添加边框，读者就会发现，p标签的边框占一整行的，但是b标签以及span标签就只包含了其文字，这就是块状元素以及行内元素的区别。

　　（三）标签选择器

　　标签选择器就只匹配同类的标签，如下例：

　　style.css的文件内容：

　　（四）ID选择器

　　只要是标签都能设定一个单独的ID值，而运用这个值可以让CSS匹配到单个标签，HTML文档当中，尽量不能出现重复的ID值，如下例：

　　style.css的文件内容：

　　（五）类选择器

　　类选择器能够对一组元素进行样式定义，HTML文档中，可以在给标签添加class属性值后，再给标签分类，如下例：

　　style.css的文件内容：

　　（六）同类标签选择器

　　要是有多个标签同时配置了一样的class值，然后只选择当中某个标签使用CSS渲染，而不影响其它同类标签，就能用到“同类标签选择器”，如下例：

　　style.css的文件内容：

　　（七）附加类选择器

　　当一个标签可以同时拥有几个类选择器的样式时，能在class中定义多个类名称，用空格分隔，如下例：

　　style.css文件内容：

　　（八）属性选择器

　　在某个标签有其它标签没有的属性时，可以尝试用该选择器，如下例：

　　style.css中文件内容：

　　属性选择器不只只针对属性名称，还可以携带属性值来一起匹配，只有当属性值以及属性名称都匹配成功的时后，CSS才发挥作用：

　　style.css中文件内容：

　　显示效果：

　　（九）属性分片匹配选择器

　　该选择器需要浏览器对CSS3的支持才可以使用，在我们只需要匹配元素中的属性值的一部分的时侯，就能用“分片匹配选择器”，如下例：

　　style.css的文件内容：

　　注意：由于该选择器查找字符串的效率非常低，经常使用这种选择器会影响页面加载速度，所以尽量不要常用。

　　（十）复合分组选择器

　　分组选择器能使用逗号罗列所有单一的选择器，例如：标签，ID，类，属性等等，然后设置CSS样式，如下例：

　　style.css的文件内容：

　　（十一）派生选择器

　　“派生选择器”也叫“后代选择器”，元素嵌套多少层是没有关系的，在指定元素下，嵌套得多深都可以匹配到，如下例：

　　style.css的文件内容：

　　（十二）子选择器

　　子选择器就只选择某个标签所包含的直属子标签，是不会被匹配到多层嵌套的元素的，如下例：

　　style.css的文件内容：

　　（十三）相邻选择器

　　相邻选择器是可以选择某个标签紧随其后的单个标签，也能选择某个标签后面的一类标签，请看下面的实例：

　　style.css的文件内容：

　　显示效果：

　　（十四）伪元素选择器

　　（1）块级首行选择器：指的是可以帮助我们选择“块状元素”的首行进行CSS样式控制，如下例：

　　显示效果：

　　（2）块级首字母选择器

　　只选择块状元素中包含的首字符进行CSS控制：

　　（3）前缀插入以及后缀插入

　　“前缀插入和后缀插入”选择器，能在指定的元素前面或者是后面插入设定字符：

　　（十五）结构性伪类选择器

　　（1）子元素选择器：指可以帮助我们选择某个标签下指定的子标签，如下例：

　　显示效果：

　　（2）子元素nth-child(n)系列选择器：指只可以选择特定的子元素，能够通过该类选择器选择任意的子元素进行CSS控制，如下例：

　　显示效果：

　　（十六）根元素选择器

　　这种选择器总是选择html标签，它的样式影响整个html文档，如下例：

　　（十七）UI伪类选择器

　　下面介绍几种UI伪类选择器，如例：

　　显示效果：

　　要是有一个表单，让文本框没有输入数据时和输入数据完成验证后不一样，就能验证伪类选择器：

　　显示效果：

　　以下是一个比较实用的UI伪类选择器，当文本框获取到光标焦点时匹配：

　　显示效果：

　　（十八）超链接伪选择器的四种状态

　　超链接最常用的四种伪类选择器：“:link”未点击前、“:visited”点击后、“:hover”鼠标悬停时、“:active”鼠标按下时，如下例：

　　（十九）否定选择器

　　显示效果：

　　（二十）空元素选择器

　　就是指将选择指定类别中不包含任何内容的那些标签：

　　显示效果：

　　（二十一）匹配语言选择器

　　（二十二）锚点定位选择器

　　（二十三）伪类选定选择器

　　注意：在鼠标选定某段文本后，将会触发伪类选定选择器：

　　总结：相信通过这篇文章，大家都会对css当中的选择器比较熟悉了。其中的22中选择器小编都一一给大家介绍了。其中，全局选择器、标签选择器、ID选择器以及类选择器是比较常用的，要是大家想要了解更多关于css的内容，就可以关注我们的网站：课课家教育。