css总结13:CSS 伪类(Pseudo-classes)
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)的更多相关文章
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
- CSS设计指南之伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...
- Html学习之十(CSS选择器的使用--伪类选择器)
伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...
- CSS选择符、伪类、层叠
主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 p em {color:red;} 父 子 p > em {color: ...
- css 04-CSS选择器:伪类
04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- CSS的总结(选择器,伪类等...)
关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...
- CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
- css笔记03:伪类first-child
1. 匹配第一个 <p> 元素 在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素: <html> <head> <style type=&qu ...
- 前端学习 --Css -- 子元素的伪类
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...
随机推荐
- mybatis-generator的坑
有天发现mybatis-generator不能用,要加什么根项目前缀, 搞到我重新从github下载,然后发现仓库用不了,原来新项目会改我的maven配置(新坑 后来终于明白要在子项目栏使用手脚架,就 ...
- 当 PHP 遇上 MongoDB
FROM:http://www.cstor.cn/textdetail_7995.html 之前笔者出了一篇文章是教大家在 Linux 下安装 MongoDB,并且透过 Mongo Client 操作 ...
- linux基础(3)
一 正文处理命令及tar命令 使用cat命令进行文件的纵向合并 两种文件的纵向合并方法 : tar命令的功能 : 掌握tar命令的功能:将多个文件(也可能包括目录,因为目录本身也是文件)放在一起存 ...
- java代码实现点击鼠标从控制台输出信息
总结:最难的就是当我们需要点击按钮时去实现某个功能-----------因为那个我没有理解透,是涉及整个程序的 package com.a.b; import javax.swing.*; impor ...
- openstack及组件简要介绍
为什要用云? 一.简单的说就是对资源更加合理的分配,使用,比如硬件的数量,带宽等等这些,因为你不能机器买来不需要了再卖掉(当然也可以),带宽跟机房签合同得来一年的,中间不够了也不能加,超了也不退钱 二 ...
- python开发函数进阶:递归函数
一,什么叫递归 #递归#在一个函数里调用自己#python递归最大层数限制 997#最大层数限制是python默认的,可以做修改#但是我们不建议你修改 例子和尚讲故事 #!/usr/bin/env p ...
- nandflash裸机程序分析
它包含7个文件: head.S init.c main.c Makefile nand.c nand.lds 我们之前的程序都是在nandflash的前4k放代码,上电后自动拷贝到SRAM中,之后将S ...
- jQueryUI Sortable 应用Demo
最近工作用需要设计一个自由布局的页面设计.我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录. 第一.单项目自由排序 下图效果 代码段: < ...
- C Primer Plus学习笔记(九)- 数组和指针
数组 数组由数据类型相同的同一系列元素组成 需要使用数组时,通过声明数组告诉编译器数组中内含多少元素和这些元素的类型 普通变量可以使用的类型,数组元素都可以用 float candy[365]; // ...
- springboot成神之——mybatis在spring-boot中使用的几种方式
本文介绍mybatis在spring-boot中使用的几种方式 项目结构 依赖 WebConfig DemoApplication 方式一--@Select User DemoApplication ...