CSS-复合选择器


css复合选择器

后代选择器

选择父选择器的的所有符合条件的子选择器,父选择器和子选择器可以是任意的基础选着器

父选择器 子选择器 {
    设置属性
}

子元素选择器

选择直接关联的子选择器

父选择器 子选择器{
    设置属性
}

并集选择器

实现多个选择起的集体声明

伪类选择器

伪类选择器通过:声明

链接伪类选择器

名称 效果
a:hove 鼠标放上去触发
a:active 点击链接时触发
a:link 未访问链接
a:visited 链接被点击时触发

注意使用链接伪类的顺序: link => visited => hover => active

使用这种顺序的原因是为了防止前面触发的效果被后面出发的效果覆盖。

未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,链接同时处于link和hover(或active)状态,由于它们特指度相同,在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。

再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前

其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。

最后,其实link、visited两个伪类之间顺序无所谓。(因为它俩不可能同时触发,即又未访问同时又已访问。)

focus伪类

元素获取焦点时,添加样式,一般用于input表单


文章作者: 木叶勇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木叶勇 !
 上一篇
CSS-基础选择器 CSS-基础选择器
基础选择器 分为标签选择器、id选择器、类选择器和通用符选择器 标签选择器以html的标签名作为选择器,进行选择 p { color: red; } 类选择器样式点定义 结构类调用 一个或多个 开发最常用 .red {
2020-04-15
下一篇 
CSS-背景 CSS-背景
css背景 主要分为背景颜色、背景图片、背景颜色的重复以及背景颜色的定位 background-color 默认是transparent(透明),可以用16进制、RGB以及直接设置颜色来设置 p { background-color:
2020-04-15
  目录