CSS伪类选择器

时间:2022-07-03 21:17:17

一、CSS伪类选择器
用于给某些选择器添加效果
语法规则:选择器:伪选择器
例:a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
在<body></body>内
<a href=”链接地址”>链接内容文字</a>
伪类选择器还可以与css类选择器配合使用
a.red : visited {color: black}
<a class="red" href="链接地址">链接内容文字</a>
链接文字则将显示为红色
2、CSS:focus伪类
:focus 伪类在元素获得焦点时向元素添加特殊的样式
input:focus
{
color:yellow;
}
在<body></body>内
input type=”text”
在用户开始键入时,文本会输入到这个黄色输入框。
3、CSS:first-child伪类
语法规则:<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
则会显示I am a strong man. I am a strong man.
I am a strong man. I am a strong man.
选择器匹配属于任意元素的第一个子元素的 <p> 元素
二、CSS伪元素选择器
1、CSS:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式
<style type="text/css">
p:first-line
{
color: #ff0000;
}
</style>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
结果为:根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
2、css:first-letter伪元素
用法与first-line 伪元素基本相同,只是该表首字母的格式
三、权重值
一等 内嵌 权重值1000
二等 id 权重值0100
三等 类,伪类 权重值0010
四等 元素,伪元素 权重值0001
通配符,子选择器,相邻通报选择器 权重值0000
!important没有权重值,当回将其他所有格式变为!important下的格式类型