一伪类

语法: 
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. 关于iphone点击readonly的input虚拟键盘不消失的情况

    今天遇到了一个比较棘手的问题,事情是这样的: 咱有一个添加地址的页面,大概长这样: 收货地址后那个"请选择收货地址"是一个readonly的input, 咱一进页面,直接点击这个& ...

  2. Java - byte[] 和 String互相转换

    通过用例学习Java中的byte数组和String互相转换,这种转换可能在很多情况需要,比如IO操作,生成加密hash码等等. 除非觉得必要,否则不要将它们互相转换,他们分别代表了不同的数据,专门服务 ...

  3. 使用 Python 进行并发编程 -- asyncio (未完)

    参考地址 参考地址 参考地址 Python 2 时代, 高性能的网络编程主要是使用 Twisted, Tornado, Gevent 这三个库. 但是他们的异步代码相互之间不兼容越不能移植. asyn ...

  4. android开发中关于继承activity类中方法的调用

    android开发中关于继承activity类中的函数,不能在其他类中调用其方法. MainActivity.java package com.example.testmain; import and ...

  5. 委托(C#)

    委托,delegate 关键字用于声明一个引用类型,该引用类型可用于封装命名方法或匿名方法.委托类似于 C++ 中的函数指针:但是,委托是类型安全和可靠的.委托类型声明的格式如下: public de ...

  6. Javaee需不需要培训?培训完可以顺利找到工作吗?

    Javaee需不需要培训?培训完可以顺利找到工作吗? 在IT行业中Java以它通用性.高效性.平台移植性和安全性遍布各个领域,它的火热也给IT市场发展带来一定影响,随着Java技术的广泛运营,企业对J ...

  7. oracle 树形表结构查询 排序

    oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...

  8. 将百度坐标转换的javascript api官方示例改写成传统的回调函数形式

    改写前: 百度地图中坐标转换的JavaScript API示例官方示例如下: var points = [new BMap.Point(116.3786889372559,39.90762965106 ...

  9. JAVA IO流结构图

    InputStreamReader和OutputStreamWriter分别继承自java.io包中的Reader和Writer,对他们中的抽象的未实现的方法给出实现.如: public int re ...

  10. Chapter 4. The MPEG-4 and H.264 Standards

    本章节介绍一些关于MPEG-4标准与H.264标准的基本知识 比较重要的是第95页关于两种标准的对比表格.其他部分没有什么特别重要的细节.