选择器—伪类选择器

1、链接伪类

  :link    指示作为超链接并指向一个未访问的地址的锚

  :visited    指示作为已访问地址超链接的所有锚

    可以对链接伪类进行颜色,样式等属性的设置。

1     a:link{
2         color:blue;
3         text-decoration:line-through;
4     }
5     a:visited{
6         color:red;
7     }

2、动态伪类

  :focus    指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素

  :hover    指示鼠标指针停留在哪个元素上

  :active    指示被用户输入激活的元素,例如鼠标指针停留在一个超链接上,如果用户点击鼠标,就会激活这个超链接。

3、以上伪类用的最多的是在超链接的设置上,伪类的顺序很重要,通常的为  link—visited—focus—hover—active。动态伪类可以应用到任何元素上。

4、选择第一个子元素

  可以使用静态伪类 first—child来选择第一个子元素

 1     span:first-child{
 2         color:red;
 3     }
 4     li:first-child{
 5         color:red;
 6     }
 7     p:first-child{
 8         color:red;
 9     }
10     <p>第一个段落</p>
11     <p>第二个段落</p>
12     <ul>
13         <li>第一个序列</li>
14         <li>第<span>span</span>二个序<span>span7</span>列</li>
15     </ul>
16     <ul>
17         <li>第三个序列</li>
18         <li>第四个序列</li>
19     </ul>

5、伪类组合

  可以把伪类进行组合使用,但是要注意不要把互斥的伪类组合在一起。比如一个超链接不可能同时是未访问和已访问两种状态

  a:link:hover{color:red;}

  a:visited:hover{color:maroon;}

6、伪元素选择器

  设置首字母样式:  P:first-letter{color:red;}。为某个元素中的文字的首字母或第一个字使用样式

  设置第一行样式:  P:first-line{color:blue;}。为某个元素的第一行文字使用样式

  设置之前的样式:  p:before{content:"[ [ ] ]";}。在某个元素之前插入一些内容

  设置之后的样式:  p:after{content:"[ [ ] ]";}。在某个元素之后插入一些内容

  以上选择器只能应用于标记或段落之类的块级元素上,而不能用于超链接等的行内元素。在伪元素里面使用属性,有一定的限制,并不是所有的属性都可以在伪元素选择器里面使用。

  

时间: 2024-10-27 02:22:42

选择器—伪类选择器的相关文章

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

前端 高级选择器 伪类选择器

高级选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高级选择器</title> <style> .h2 { color: red; } /*1.后代(子代)选择器*/ /*后代:空格连接 子代:>连接*/ /*body > .h2 控制一个 | body .h2 控制两个*/ body > .h2 { fo

CSS3 选择器之基本选择器 属性选择器 伪类选择器

CSS 选择器 常见的选择器列表图 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 后代选择器(E F) 子元素选择器(E>F)    IE6不支持子元素选择器.

Css3选择器-伪类选择器

一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus". 对于:hover在IE6下只有a元素支持,:active只有IE7-6不支持,:focus在IE6-7下不被支持. 三.CSS3的:nth选择器

选择器&amp;伪类选择器

CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p>

CSS之固定定位,绝对定位+负边距,双飞翼布局,属性选择器,伪类选择器补,状态伪类选择器,相邻全部兄弟选择器,取非选择器,em与rem,变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要 负边距 双飞翼布局 属性选择器 伪类选择器 补 状态伪类选择器 相邻全部兄弟选择器 取非选择器 em与rem 变形效果 固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚

标准文档流以及伪类选择器

标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.) 行级加float,就会脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,display就没有

标准文档流 伪类选择器

                                                 标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.)