010. CSS 选择器

html-css014

010. CSS 选择器,第1张

CSS 元素选择器(也称为类型选择器)通过 Node 节点名称匹配元素。

因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素。

根据元素的类属性中的内容匹配元素。

类属性被定义为一个以空格分隔的列表项,在这组类名中,必须有一项与类选择器中的类名完全匹配,此条样式声明才会生效。

选择器会根据该元素的 ID 属性中的内容匹配元素。

元素 ID 属性名必须与选择器中的 ID 属性名完全匹配,此条样式声明才会生效。

在 CSS 中,一个星号( * )就是一个通配选择器。它可以匹配任意类型的 HTML 元素。

在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。比如,*.warning 和.warning 的效果完全相同。

在 CSS3 中,星号( * )可以和命名空间组合使用:

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

相邻兄弟选择器 ( + ) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。

兄弟选择符,位置无须紧邻,只须同层级,A~B 选择 A 元素之后所有同层级 B 元素。

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素。

通常用单个空格( )字符表示)组合了两个选择器,

如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父级,父级的父级,父级的父级的父级等)元素,则它们将被选择。

CSS 选择器列表( , ),常被称为并集选择器或并集组合器,选择所有能被列表中的任意一个选择器选中的节点。

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素,即指定要选择的元素的特殊状态。

例如, :hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

具体详见

:: 伪选择器用于表示无法用 HTML 语义表达的实体。

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

例如, p::first-line 匹配所有 <p> 元素的第一行。

具体详见

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

语法:标签名{}

作用:通过元素的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中会默认使用权重较大的样式,下面看一下权重又是如何计算的。

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