css有哪些种类的选择器

html-css021

css有哪些种类的选择器,第1张

主要的css选择器如下:

1、标签选择器

2、类选择器

3、ID选择器

4、全局选择器

5、组合选择器

6、继承选择器

7、伪类选择器

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

选定所有对象。

语法

以文档语言对象类型作为选择符。即 html 中的标签

语法

以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。

语法

以 class 属性包含 myclass 的 E 对象作为选择符。

不同于 id 选择符 的唯一性,类选择符可以同时定义多个,并控制多个元素的样式

语法

群组选择器 (selector1,selectorN) 是将具有 相同样式 的元素分组在一起,每个选择器之间用逗号( , )隔开。

语法

后代选择器( E F )是选择 E 元素的所有后代 F 元素,不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系,都会被选中。

语法

子选择器( E>F )是选择 E 元素的所有子后代 F 元素,注意 F 元素仅仅是 E 元素的子元素而已。

语法

兄弟选择器( E~F )是 CSS3 新增选择器,代表 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面,但是不用相邻。

例子

语法

相邻选择器( E+F )是 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面且相邻。

语法

简介

根据具有链接属性的 E 元素的被访问情况进行匹配。

例子

index.html

index.css

简介

根据用户对于 E 元素的操作来进行匹配。

例子

index.html

index.css

作用:通过元素选择器可以选择页面中的所有指定元素

语法:标签名{}

作用:通过元素的class属性值选中一组元素

语法:.class属性值{}

id选择器

作用:通过元素的id属性值选中唯一的一个元素

语法:#id属性值{}

复合选择器(交集选择器)

作用:可以选中同时满足多个选择器的元素

语法:选择器1选择器2选择器N{}

选择器分组(并集选择器)

作用:通过选择器分组可以同时选中多个选择器对应的元素

语法:选择器1,选择器2,选择器N{}

通配选择器

作用:可以用来选中页面中的所有的元素

语法:*{}

元素之间的关系:

父元素:直接包含子元素的元素

子元素:直接被父元素包含的元素

祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素

后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素

兄弟元素:拥有相同父元素的元素叫做兄弟元素

作用:选中指定元素的指定后代元素

语法:祖先元素 后代元素{}

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

给链接定义样式:

有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。

其他:

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法: :not(选择器){}

比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法:

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用:选中指定父元素的指定子元素

语法:父元素 >子元素

比如body >h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系,还可以根据兄弟关系查找元素。

语法:

兄弟元素 + 兄弟元素 :查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。

比如:

这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。

不同的选择器有不同的权重值: