作用:根据元素的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