css伪类选择器

伪类选择器

  伪类是专门用来表示元素的一种特殊状态，好比说常见的 a 元素的一些特殊状态（原始状态的超连接，访问过的超连接，运行中的超连接等等），当咱们须要为这些处在特殊状态的元素设置样式的时候就可使用伪类选择器来定义。

动态伪类，由于这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是咱们在连接中常看到的锚点伪类，如":link",":visited";另一种被称做用户行为伪类，如“:hover”,":active"和":focus"

2、anchor伪类

给连接定义四个样式：

• a:link{ }  正常状态下的连接
• a:visited{ }  访问过的连接 （只能定义字体颜色color）
• a:hover{ }  鼠标悬停的连接
• a:active{ }  正在被点击的连接

伪类名称不区分大小写

实例：

一、为没访问过的连接设置颜色为蓝色（正常状态下的连接）：

a:link{ color:skyblue;}

二、为访问过的连接设置颜色为红色：

a:visited{ color:red; }

三、为鼠标悬停状态下的连接设置颜色为绿色：

a:hover{ color:green;}

四、为正在被点击的超连接设置颜色为黄色：

a:active{ color:yellow;}

:hover 和 :active 伪类不单单能够给超连接设置样式，也能够支持超连接之外的元素使用hover和active。可是IE浏览器不支持超连接之外的元素使用hover和active。

1 p:hover{background：yellow} 3 p:active{background：orange} 5 <p>这是一个段落</p>

浏览器如何判断连接是否访问过？浏览器经过历史记录来判断一个连接是否访问过。

因为涉及到了用户隐私，因此：visited伪类只能设置字体颜色属性。

优先顺序：若是同时设置这四个伪类，那么必须按照指定的顺序设置才能生效：a:hover 必须在 a:link 和 a:visited 以后，须要严格按顺序才能看到效果。a:active 必须在 a:hover 以后。

 

2、其余伪类

• :focus  获取焦点
• ::selection  选中的元素
• :before  指定元素前（伪元素）
• :after  指定元素后（伪元素）

一、：focus获取焦点（文本输入时闪烁的光标叫获取焦点，光标消失叫作失去焦点）

例：文本框获取焦点之后，其背景颜色变成黄色

input:focus{ background:blue}
<input type="text">

得到焦点为

二、::selection为选中的内容设置样式

p::selection{background:yellow}
<p>第一个段落第一个段落第一个段落第一个段落</p>

三、在p元素后面添加文字内容

p:after{content:"会出如今元素的最后面";color:blue;}

 

四、在p元素前面添加文字（使用伪类元素插入的内容“会出如今元素的最前面”这部份内容不可选中）

p:before{content:"会出现元素的最前面";color:orange;}

 

 

3、选择元素的第一个或最后一个子元素（:first-child伪类和:last-child伪类）

:first-child  选择元素的第一个子元素

:last-child  选择元素的最后一个子元素

一、选择div父元素中的第一个子元素p元素，设置文字颜色为红色。

p:first-child{color:red} <div> <p >第一</p> <p>第二</p> <p>第三</p> </div>

二、选择div父元素中的最后一个子元素p元素，设置文字颜色为黄色。

p:last-child{color:yellow;}

<div>
<p >第一</p>
<p>第二</p>
<p>第三</p>
</div>

三、选择相匹配的全部<p>元素的第一个 <em> 元素，定义文字颜色为蓝色。

p>em:first-child{color:blue} <div> <p >第一</p> <p><em>第二</em></p> <p>第三</p> </div>

四、选择器匹配全部做为元素的第一个子元素的 <p> 元素中的全部 <em> 元素，定义文字颜色为橙色

p:first-child em{color:orange} <div> <p><em>第一</em></p> <p><em>第二</em></p> <p><em>第三</em></p> </div>