一伪类

语法: 
selector : pseudo-class {property: value}

 提示:伪类名称对大小写不敏感。

   与 CSS类搭配使用

selector.class : pseudo-class {property: value}
例子:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */ 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类们:

:visited 伪类 - 向已被访问的链接添加样式。

:link 伪类 - 向未被访问的链接添加样式。

:hover 伪类 - 当鼠标悬浮在元素上方时,向元素添加样式。

:active 伪类 - 向被激活的元素添加样式。

:first-child 伪类 - 选择元素的第一个子元素。

:focus伪类 - 向拥有键盘输入焦点的元素添加样式。

:lang 伪类 - 为不同的语言定义特殊的规则。

二 伪元素
语法: 
selector:pseudo-element {property:value;}
提示:伪类名称对大小写不敏感。

   与 CSS类搭配使用:

selector.class :pseudo-element{property: value}
例子:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff;
font-variant:small-caps;
}

:first-letter 伪元素 - 向文本的第一个字母添加特殊样式。

:first-line 伪元素 - 向文本的首行添加特殊样式。

:before 伪元素 - 在元素之前添加内容。

:after 伪元素 - 在元素之后添加内容。

 

【CSS】伪类与伪元素的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  3. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  6. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  7. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  8. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  9. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  10. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. (转)关于BigDecimal 转化字符串toPlainString()和toString()的区别

    对于  BigDecimal b ;     (b=(0.4321)^ 20)String s = b.toPlainString() ;System.out.println(s) ; 输出为:0.0 ...

  2. c# networkcomms 3.0实现模拟登陆总结

    最近项目需要做一个客户查询状态系统,当前上位机缺少服务功能,于是找到了networkcomms 开源框架,作为项目使用. 最新版networkcomms 下载地址:https://github.com ...

  3. od的用法

    一.功能 查看非文本文档的内容 二.用法 1.语法 od [-A RADIX] [-t TYPE] 文件名 2.选项与参数 -A: 指定偏移量的输出形式 d[size] :利用十进制(decimal) ...

  4. 版本控制工具svn的安装与简单使用

    版本控制工具多用于多人协作开发项目中,这不同于个人开发项目,想把自己代码怎样放置都可以,而且删除了代码很难查找. 版本控制工具类似于个人处理钱的过程,放于自己口袋管理类似于个人开发情形,如果自己钱丢了 ...

  5. (cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")

    前言  书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs. 现有的构建工具  由于浏览器 ...

  6. hibernate查询部分字段转换成实体bean

    //hibernate查询部分字段转换成实体bean /** * 查询线路信息 */ @Override public List<Line> getSimpleLineListByTj(M ...

  7. Streaming结合Kafka

    Spark2.11 两种流操作 + Kafka Spark2.x 自从引入了 Structured Streaming 后,未来数据操作将逐步转化到 DataFrame/DataSet,以下将介绍 S ...

  8. 增广拉格朗日乘子法(Augmented Lagrange Method)

    转载自:增广拉格朗日乘子法(Augmented Lagrange Method) 增广拉格朗日乘子法的作用是用来解决等式约束下的优化问题, 假定需要求解的问题如下: minimize f(X) s.t ...

  9. Python3组合数据类型(元组、列表、集合、字典)语法

    一.序列类型(字符串,元组(),列表[]) 序列类型支持in,len(),分片[],迭代,5种内置序列类型:bytearray,bytes,list,str,tuple(元组). 1.元组可以嵌套(如 ...

  10. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...