CSS3选择器入门

html-css018

CSS3选择器入门,第1张

元素选择器 作用:根据标签名来选中指定的元素 语法:标签名{} 例子:p{} h1{} p{}

作用:根据元素的id属性值选中一个元素 语法:#id属性值{} 例子:#box{} #red{}

类选择器 作用:根据元素的class属性值选中一组元素 语法:.class属性值

作用:选中页面中的所有元素 语法: *

作用:选中同时复合多个条件的元素 语法:选择器1选择器2选择器3选择器n{} 注意点: 交集选择器中如果有元素选择器,必须使用元素选择器开头

选择器分组(并集选择器) 作用:同时选择多个选择器对应的元素 语法:选择器1,选择器2,选择器3,选择器n{}

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

作用:选中指定元素内的指定后代元素 语法:祖先 后代

选择下一个兄弟 语法:前一个 + 下一个

选择下边所有的兄弟 语法:兄 ~ 弟

[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素

表示页面中一些特殊的并不真实的存在的元素(特殊的位置)

伪元素使用 :: 开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

before 和 after 必须结合content属性来使用

样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发, 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上, 这样只需设置一次即可让所有的元素都具有该样式

注意:并不是所有的样式都会被继承:比如 背景相关的,布局相关等的这些样式都不会被继承

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式 没有优先级

可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式,

注意:在开发中这个玩意一定要慎用!

选定所有对象。

语法

以文档语言对象类型作为选择符。即 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