HTML
伪类专门用来表示元素的一种的特殊的状态。
比如: 访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
给链接定义样式
- 正常链接
a:link {
color: yellowgreen;
}
- 访问过的连接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用a:visited伪类只能设置字体的颜色
a:visited {
color: red;
//font-size: 30px;(不可行)
}
- 当鼠标悬浮在元素上方时，向元素添加样式
a:hover {
background-color: black;
}
- 向被激活(点击)的元素添加样式
a:active {
background-color: aqua;
}
:active和:hover 也可以用于其他元素。
- 向拥有键盘输入焦点的元素添加样式
input:focus {
background-color: aquamarine;
}
- 为选中的内容设置样式
span::selection {
color: orange;
}
伪元素
使用伪元素来表示元素中的一些特殊的位置
1. first-letter
为P中的第一个字符设置样式
p::first-letter {
color: red;
font-size: 20px;
}
2. first-line
为P中的第一行设置样式
p::first-line {
background-color: aqua;
}
3. :before
可以在元素内容的前面插入新内容
p::before {
content: "位于段落的最前边";
color: orange;
}
4. :after
可以在元素内容的后面插入新内容
P::after {
content: "位于段落的最后面";
color: blueviolet;
}
属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性
<style>
/* 选取含有指定属性的元素 */
p[title] {
background-color: yellow;
}
/* 选取含有指定属性值的元素 */
p[title="hello"] {
background-color: aqua;
}
/* 选取属性值以指定内容开头的元素 */
p[title^="ab"] {
background-color: yellowgreen;
}
/* 选取属性以指定内容结尾的元素 */
p[title$="c"] {
background-color: brown;
}
/* 选取属性值包含指定内容的元素 */
p[title*="c"] {
background-color: brown;
}
</style>
</head>
<body>
<p title="hello">属性选择器</p>
<p title="abbc">属性选择器</p>
<p title="abcde">属性选择器</p>
<p>属性选择器</p>
<p title="abc">属性选择器</p>
</body>
