二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CSS3新增伪类
UI伪类
UI伪类会在HTML标签处于某种状态时,应用CSS样式,最常使用UI伪类的标签是a,利用链接伪类,用户可以在鼠标悬停是改变的颜色,去掉文本的下划线或提示信息面板等
我们先来讨论下链接伪类。链接伪类总共有四个,因为链接始终是以下四种状态之一
- link 等待用户点击
- visited 用户此前点击过
- hover 鼠标悬停状态
- active 链接正在被点击
下面是使用四个伪类选择符的链接a标签
a:link{color:black;}
a:visited{color:green;}
a:hover{text-decoration: none;}
a:active{color: red;}
由于四种状态的特指度相同,上面链接在初始状态时是黑色,点击之后是绿色,悬停时下划线消失,正在点击时显示为红色
需要说明的时候,伪类可以应用任何元素,而不仅仅是a元素
p:hover{background-color: blue;}
上面代码,可以让段落,在悬停时改变背景色为蓝色
结构化伪类
结构化伪类可以根据标签的结构关系应该样式
e:first-child 代表一组同胞元素中的第一个元素
e:last-child 代表一组同胞元素中的最后一个元素
下面的CSS标记,会将列表的第一行文本设置为红色
ol.results li:first-child{color:red;}
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
同理
ol.results li:last-child{color:green;}
将该列表最后一行文本设置为绿色
e:nth-child(n)
这个伪类更加灵活,而不像e:first-child或e:last-child只是用于设置第一个和最后一个元素那么简单,e:nth-child(n)它可以指定同一组中的任何一个元素
像上面那样的样式,我们可以使用e:nth-child(n)完成同样的效果
ol.results li:nth-child(1){color:red;}
ol.results li:nth-child(6){color:green;}
数字1、6 代表第一个元素和最后一个元素
ol.results li:nth-child(4){color:yellow;}
上面的CSS将列表的第四项设置为黄色
然而e:nth-child()真正强大之处在于,它可以实现奇偶选择
ol.results li:nth-child(odd){color:red;}
ol.results li:nth-child(even){color:green}
这样整个列表的1、3、5项文本被设置为红色,而2、4、6项被设置为绿色
伪元素
e::first-letter
选择首字母
可以使用e::first-letter将段落的首字母字体变大
p::first-letter{font-size: 300%;}
伪元素实际上是替我们添加了无形的标签
e::first-line
选择元素的第一行
例如,使用e::first-line将段落的第一行字体放大
p::first-line{font-size: 300%;}
e::before和e::after
分别用于在特别元素的前面或后面添加特定内容
下面有一个段落
<p class="demo">This is a demo</p>
CSS样式
p.demo::before{content: "CSS-Study:"}
效果如下:
上面的所有,需要注意的是搜索引擎,不会取得伪元素的信息,因为它本身就不存在
下面是伪类总结结构图
二.CSS的伪类的更多相关文章
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 奇妙的CSS之伪类与伪元素
我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
随机推荐
- c语言操作符 “++”另类行为
正常情况下,我们使用++ int a = 1; a++; printf(“%d”,a); // 2; 很简单没什么好说的. #include <stdio.h> int main() ...
- CMSIS Example - Signal
/*---------------------------------------------------------------------------- * RL-ARM - RTX *----- ...
- 【转】selenium及webdriver的原理
主要内容转自:http://blog.csdn.net/ant_ren/article/details/7968582和http://blog.csdn.net/ant_ren/article/det ...
- SaundProgressBar
https://github.com/eltld/SaundProgressBar
- android ListView 中getview学习总结
最近在做android相关的开发,ListView中有一个图片错位的问题,今天查了很多人写的一些东西,所以记录下来,算是一种加深理解吧. ListView是一个非常常用的控件,功能可以扩展的很丰富,而 ...
- GIT GUI的使用(转)
前段时间跟着Ruby On Rails的toturial玩了一把Git,今天再回过头来,觉得这个版本控制工具真的很不错.下面来讲一下,在windows下如何通过git gui来管理代码. 首先,要在h ...
- 利用shell脚本统计文件中出现次数最多的IP
比如有如下文件test.txt 1 134.102.173.43 2 134.102.173.43 3 134.102.171.42 4 134.102.170.9 要统计出现次数最多的IP可 ...
- Repeater的ItemCreated和ItemDataBind的区别
Repeater 的ItemCreated的事件在第一次调用DataBind方法的时候触发,即在(IsPostBack==false)的时候才调用,当页面回滚是将不是调用该方法(错误的源头).而Ite ...
- C++ Qt 访问权限总结
总结:C++的访问修饰符的作用是以类为单位,而不是以对象为单位. 通俗的讲,同类的对象间可以“互相访问”对方的数据成员,只不过访问途径不是直接访问. 步骤是:通过一个对象调用其public成员函数,此 ...
- ORB:新一代 Linux 应用
Orbital Apps 给我们带来了一种新的软件包类型 ORB,它具有便携软件.交互式安装向导支持,以及离线使用的能力. 便携软件很方便.主要是因为它们能够无需任何管理员权限直接运行,也能够带着所有 ...