伪类的格式重点:父标签层级 & 当前标签类型 通过例子说明: css1: span:nth-of-type(2){color: red;} css2: span :nth-of-type(2){color: red;} html: <p> <span>I have an apple</span> <i>I have an orange</i> <strong>I have a banana</strong> <…
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的 3.格式 :link 修改从未被访问过状态下的样式 :visited 修改被访问过的状态下的样式 :hover 修改鼠标悬停在a标签上状态下的样式 :active 修改鼠标长按状态下的样式 4.注意点4.1a标签的伪类选择器可以单独出现也可以一起出现4.2a标签的伪类选择器…
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问过的状态下的样式. 3):active 修改鼠标长按状态下的样式. 4):hover 修改鼠标悬停在a标签上状态下的样式. 3.注意点: 1)a标签的伪类选择器可以单独出现也可以一起出现. 2)a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守 爱恨原则---love hat…
关于伪类,大家最熟悉的还是a标签的4个伪类::link        有链接属性时:visited    链接地址已被访问过:active     被用户激活(在鼠标点击与释放之间发生的事件):hover      其鼠标悬停 关于这四个伪类的排列次序,很多地方都能查到,可是为什么这么排列?从来没有见过有人提及.这里我就从技术.用户体验.优先级几个角度简单的阐述下我们为什么这么排列. 首先从技术层面上, a的这四个伪类,分别表示了a的四种状态,要注意的是,a可以只具有一种状态(:link),或者…
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 <style type="text/css"> a { color: #333; text-decoration: none; } /*:link为一个整体,代表超链接的初始状态*/ a:link { color: orange; } /*:hover鼠标悬浮*/ a:hover…
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原则: (love\hate原则,即link\visited\hover\active)默认状态.被访问后的状态.悬停状态.长按状态 (3)如果默认状态的阿燕是和被访问过的状态的样式一样,那么可以缩写为 a{ color:颜色;},后面写了另外两种状态​也是不影响的. 二.快捷键 (1)ul>(li>…
一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? a标签的伪类选择器是专门用来修改a标签不同状态的样式. a:link{} 用来修改默认的样式 a:visited{} 用来修改被点击过之后的样式 a:active{} 用来修改被鼠标长按时的状态 a:hover{} 用来修改鼠标悬停在a标签上面时的状态. <!DOCTYPE html> <…
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择器是由两个或多个基础选择器,通过不同的方式组合而…
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 多元素选择器(E,F) 后代选择器(E F) 子元素选择器(E>F) IE6不支持子元素选择器. 子元素选择器,匹配所有E元素的子元素F 相邻元素选择器(E + F)      毗邻元素选择器,匹配所有紧随E元素之后的同级元素F…
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.…