上一篇文章我们介绍了CSS中几种常用的选择器,今天我们继续介绍余下几种
1.属性选择器
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
示例:
示意图如下:
2.伪类选择器
伪类(不存在的类,特殊的类)
不是指特定的某个元素,而是指某个状态,例如第一个,最后一个,鼠标移入,鼠标点击 等等
在所有的元素中进行排序
:first-child 第一个元素
:last-child 最后一个元素
:nth-child(n) 选中第几个
n 所有的元素
2n/even 选中偶数元素
2n+1/odd 选中奇数元素
在同类型的元素中进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type() 选中第几个
n 所有的元素
2n/even 选中偶数元素
2n+1/odd 选中奇数元素
:not() 否定伪类
-将符合条件的元素从选择器中去除
示例:
3.伪元素选择器
伪元素,表示页面中一些特殊的并不真实存在的元素(元素的位置)
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
注意:before和after必须要结合content使用
示例:
除此之外,我们有必要了解关于样式继承的相关知识
样式的继承(继承祖先的资产)
定义:为一个元素设置的样式,同时也会应用到它的后代元素上
优势:方便我们开发,讲一些通用的样式统一设置到共同的祖先元素上,子元素的样式都可以获取到样式
注意:并不是所有的样式都会被继承,比如:背景相关的,布局相关等不会被继承
继承性
可继承: font-size font-family color line-height ;
不可继承 :border padding margin width height ;