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

2 常用示例:

2.1anchor伪类:代码:

  正常语法:

a{color:#FF0000;}/* 文字颜色 */

  伪类语法:

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 之后,才是有效的。伪类的名称不区分大小写。

2,2 CSS - :first - child伪类

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

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

例1:匹配第一个 <p> 元素:p标签的第一个标签内容变蓝。

p:first-child {

color:blue;

}

例2:p标签内的子标签i内的第一个标签i内的文字变蓝

p > i:first-child{

color:blue;

}

 

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

  1. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

  2. CSS设计指南之伪类

    伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...

  3. Html学习之十(CSS选择器的使用--伪类选择器)

    伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...

  4. CSS选择符、伪类、层叠

    主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 p em {color:red;} 父 子 p > em {color: ...

  5. css 04-CSS选择器:伪类

    04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...

  6. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  7. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  8. CSS 中功能相似伪类间的区别

    导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...

  9. css笔记03:伪类first-child

    1. 匹配第一个 <p> 元素 在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素: <html> <head> <style type=&qu ...

  10. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

随机推荐

  1. linux 本地账号密码无法登陆(shell可以登录),一直返回 登陆的login界面

    今天我在我虚拟机测试的时候遇到了一个问题.登陆centos一直是返回login,账号和密码没错,我也换了两个用户. 1.问题描述 我正常的输入用户名和密码 错误提示截图:返回登陆界面,我重新试了另外的 ...

  2. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  3. Java 数组的浅拷贝和深拷贝

    浅拷贝: 在堆内存中不会分配新的空间,而是增加一个引用变量和之前的引用指向相同的堆空间. int[] a = {1,2,3,4,5}; int[]b = a; public class Test { ...

  4. substr的学习(PHP学习)

    substr的用法: 首先看PHP手册 ,手册上是这样说的 string substr ( string $string , int $start [, int $length ] ) 执行subst ...

  5. 解决jenkins拉取报告没有样式的问题(还没试过)

    来源: https://testerhome.com/topics/9476 对于测试报告来说,除了内容的简洁精炼,样式的美观也很重要.常用的做法是,采用HTML格式的文档,并搭配CSS和JS,实现自 ...

  6. java代码如何替换字符

    package com.aa; public class Ss { public static void main(String[] args) { String a = "ABCD&quo ...

  7. Vue.js:组件

    ylbtech-Vue.js:组件 1.返回顶部 1. Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让 ...

  8. PyYAML和configparser模块讲解

    Python也可以很容易的处理ymal文档格式,只不过需要安装一个模块,参考文档:http://pyyaml.org/wiki/PyYAMLDocumentation ymal主要用于配置文件. Co ...

  9. PHP通过引用传递参数

    <?php function add_some_extra(&$string) // 引入变量,使用同一个存储地址 { $string .= 'and something extra.' ...

  10. keepalived 预防脑裂检测脚本

    1 检查vip [root@mysql2 keepalived]# cat /etc/keepalived/check_brain_keepalived.sh #!/bin/bash # 检查脑裂的脚 ...