ylbtech-CSS:CSS 伪类(Pseudo-classes)
1.返回顶部
1、

CSS 伪类(Pseudo-classes)


CSS伪类是用来添加一些选择器的特殊效果


语法

伪类的语法:

selector:pseudo-class {property:value;}

CSS类也可以使用伪类:

selector.class:pseudo-class {property:value;}


anchor伪类

在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示

实例

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 之后,才是有效的。

注意:伪类的名称不区分大小写。


伪类和CSS类

伪类可以与 CSS 类配合使用:

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问,它会显示为红色。


CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

注意:在IE8的之前版本必须声明<!DOCTYPE> ,这样 :first-child 才能生效。

匹配第一个 <p> 元素

在下面的例子中,选择器匹配作为任何元素的第一个子元素的 <p> 元素:

实例

p:first-child
{
color:blue;
}

尝试一下 »


匹配所有<p> 元素中的第一个 <i> 元素

在下面的例子中,选择相匹配的所有<p>元素的第一个 <i> 元素:

实例

p > i:first-child
{
color:blue;
}

尝试一下 »


匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素:

实例

p:first-child i
{
color:blue;
}

尝试一下 »


CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

注意:IE8必须声明<!DOCTYPE>才能支持;lang伪类。

在下面的例子中,:lang 类为属性值为 no 的q元素定义引号的类型:

实例

q:lang(no) {quotes: "~" "~";}

尝试一下 »


更多实例

为超链接添加不同样式
这个例子演示了如何为超链接添加其他样式。

使用 :focus
这个例子演示了如何使用 :focus伪类。


所有CSS伪类/元素

选择器 示例 示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有p元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 伪类(Pseudo-classes)的更多相关文章

  1. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

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

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

  3. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  4. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  5. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

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

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

  7. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  8. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  9. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  10. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

随机推荐

  1. if(!confirm("您确定删除吗?")){return;}

    if(!confirm("您确定删除吗?")){return;}

  2. How do I force my .NET application to run as administrator?

    How do I force my .NET application to run as administrator? You'll want to modify the manifest that ...

  3. restTemplate源码详解深入剖析底层实现思路

    一 准备工作 1 启动一个项目,发布一个restful的get请求,端口设置为8090. @RestController @RequestMapping("/youku1327") ...

  4. 65、salesforce的数据分页

    <apex:page controller="PagingController"> <apex:form > <apex:pageBlock titl ...

  5. 指向自身类型的成员指针的初始化,this不属于类对象的一部分

    有下面的一个简单的类: class CNullPointCall{public:    static void Test1();    void Test2();    void Test3(int  ...

  6. 如何用QTP录制鼠标右键点击事件

    QTP录制鼠标右键单击事件要通过模拟键盘操作来实现 Step 1,修改ReplayType为2,一般情况默认设置是1的.(1 – 使用浏览器事件运行鼠标操作. 2 – 使用鼠标运行鼠标操作)Setti ...

  7. Java数据类型简介

    Java数据类型 以下两行Java代码定义了两个整数:num1和num2: num1和num2是两个int类型的变量. int关键字指定它的后面是变量的名称,并表示数据类型整数,例如:10,15,70 ...

  8. MySQL中的关系

    关系 将实体与实体的关系,反应到最终数据库表的设计中来.将关系分为三种:一对一,一对多(多对一)和多对多.所有的关系都是指的是表与表之间的关系. 一对一 一张表中的一条记录一定只能与另外一张表的一条记 ...

  9. Android组件内核之Activity调用栈分析(一)

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 导语 我们陈述一下Activity,Activity是整个应用用户交互的 ...

  10. redis 入门之哈希

    hset 将哈希表 hash 中域 field 的值设置为 value .如果给定的哈希表并不存在, 那么一个新的哈希表将被创建并执行 HSET 操作.如果域 field 已经存在于哈希表中, 那么它 ...