伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符:

关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。

其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{
    color:red;
    font-size:20px;
}
p:hover {
    color:blue;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时,我还是一个<a href="http://www.rinpe.com">胆小如鼠</a>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
    <img src="http://img.rinpe.com/123.jpg" alt="图片挂了">
</body>
</html>
时间: 2024-08-25 03:23:11

伪类选择符的相关文章

子选择符 、相邻选择符 、 兄弟选择符 、 伪类选择符

子选择符: E>F 选择所有作为E元素的子元素F <style> div>p{ color: red; } </style> <div> <h3>我是标题1</h3> <p>我第1个是p标签</p> <p>我第2个是p标签</p> <p>我第3个是p标签</p> <small>我是小标题</small> </div> 显示效果:

#8.9.16总结# 关系选择符和伪类选择符

1.关系选择符 示例: E F 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>关系选择符</title> 6 <style type="text/css"> 7 .item+li{ 8 background-color: #F00; 9 } 10 &l

CSS伪类选择符归纳

伪类选择符归纳 伪类选择符比较多,不加以归类很难记清楚记全:我们可以先把他分为两类 和元素本身转态有关,类似于链接点击前,点击后 和元素在DOM结构中所处的结构有关,类似于第n个元素,或者奇数行. 一.和元素本身转态有关 :link,:visited,:hover,:active :link指的是超链接在访问前的状态 :visited指的是超链接在访问后的转态 :hover指的是鼠标悬停在元素上的状态 :active指的是鼠标点击元素不放时的转态 这几个伪类的书写有一定的顺序,:link和:vi

【00】伪类选择符-魔芋的理解

[00]魔芋的理解 nth-child(n)这样的带n的,n从1开始. n可以是表达式:n*3,n+3 可以是特殊字符串"odd","even" [02]empty 匹配没有任何子元素(包括text节点)的元素E. 注意:如果开始标签和结束标签间有空格或是换行,都是属于有元素的.(魔芋:所以不实用) [04]not(s) 匹配不含有s选择符的元素E. [05]first-child E:first-child E:first-child { sRules } 用法比

CSS选择符-----伪类选择符

Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } a, div { display: block; ma

CSS Pseudo-Element Selectors伪对象选择符

一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效. 为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样 Selectors选择符 CSS Version版本 Description简介 E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式. E:first-line

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐

宽高自适应,高度塌陷,伪对象选择符

宽高自适应 网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同窗口和不同分辨率下显示. 宽度自适应 元素宽度设置为100%.(块元素宽度默认为100%) 或者不设置宽度(width);(宽度是父元素的宽度) 高度自适应 1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度) 2)元素高度自适应窗口高度 设置方法

CSS伪对象选择符整理

1.E::selection 2.E::placeholder 1. E::selection 设置对象被选择时的样式. 需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性). 兼容性: <div class="_selection"> <p>1. Selecting master branch will publish your site from the ma