伪类 link
伪类是给页面中已经存在的元素添加一个不存在类。
伪类用来描述一个元素的特殊状态,如:第一个子元素,鼠标点击的元素,鼠标移入的元素
常用伪类属性
- :active 向被激活的元素添加样式
- :focus 向拥有键盘输入焦点的元素添加样式
- :hover 当鼠标悬浮在元素上方时,向元素添加样式
- :link 向未被访问的链接添加样式
- :visited 向已被访问的链接添加样式
- :first-child 向元素的第一个子元素添加样式
伪类选择器处理超链接
- 给超链接不同状态添加不同的颜色或样式
- a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
- a:active 必须被置于 a:hover 之后,才是有效的
<style>
/* 未访问的链接 */
a:link {color: yellow;}
/* 已访问的链接 出于隐私考虑visited伪类只能修改颜色 */
a:visited {color: peru;}
/* 当鼠标移动到超链接*/
a:hover {color: #00b3ff;}
/* 选定的链接 */
a:active {color: blue;}
</style>
<body>
<a href="https://www.baidu.com/">百度</a>
</body>
首个子元素 :first-child(所有)
- 根据父元素中的所有子元素进行排序
- 最后一个子元素 :last-child
- 第n个子元素 :nth-child(n)
<style type="text/css">
h3:first-child{
color: red;
}
/* 代表含义: li所在父元素中的第一个子元素 如果是li才会添加样式 */
li:last-child{
color: #00b3ff;
}
/*n全选 2n选偶数位 2n+1选奇数位 */
li:nth-child(2){
color: #4FEF10;
}
</style>
<body>
<h3>今天星期天</h3>
<ul>
<li>学编程</li>
<li>学编程</li>
<li>学编程</li>
</ul>
</body>
首个子元素 :first-of-type(同类型)
- 根据父元素中的同类型的子元素进行排序
- 最后一个子元素 :last-of-type
- 第n个子元素 :nth-of-type(n)
否定伪类 :not()
<style type="text/css">
/*给除了第二个li的元素添加样式*/
li:not(:nth-child(2)){
color: #00b3ff;
}
</style>
<body>
<ul>
<li>学编程</li>
<li>学编程</li>
<li>学编程</li>
</ul>
焦点 :focus
向拥有键盘输入焦点的元素添加样式
<style type="text/css">
input:focus{
background: #4FEF10;
}
</style>
<body>
<form action="#" method="get">
账号:<input type="text" name="user"><br>
密码:<input type="text" name="pwd"><br>
</form>
</body>
伪类选择器还有很多用法
<style>
div{
width: 100px;
height: 100px;
border: 2px yellow solid;
}
/*当鼠标移动到div 变色+放大*/
div:hover {
background-color: #00b3ff;
width: 200px;
height: 200px;
}
</style>
<body>
<div></div>
</body>
伪元素 link
伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加)
用法:伪元素::或:开头都可以,伪类:开头
伪元素常用属性
- :first-letter 向文本的第一个字母添加特殊样式
- :first-line 向文本的首行添加特殊样式
- :before 在元素内容之前添加内容
- :after 在元素内容之后添加内容
首字母大写 :first-letter
首行字母大写 :first-letter
以上效果都可以通过添加sapn来实现。但会导致有过多标签,用伪元素更合理
在元素内容之前添加内容 :before
- 必须有content内容才能设置其他属性,没有content内容就没有空间
- 这个元素可以是 div span p等,应该大多元素都可以
在元素内容之后添加内容 :after
使用方法同上