CSS中伪类选择器
作用:选中特殊状态的元素
如何理解"伪"?--虚假的,不真实的
如何理解"伪类"?--像类(class),但是不是类,是元素的一种特殊的状态.
一.动态伪类选择器
1. :link 超链接未被访问的状态;
2. :visited 超链接访问过的状态;
3. :hover 鼠标悬停在元素上的状态;
4. :active 元素激活的状态.
什么是激活状态?
按下鼠标不松开.
注意点:
以上的顺序是不能变动的,否则将会失效部分功能.
5. :focus 获取焦点的元素.
表单元素才能使用:focus伪类;
当用户点击元素,触摸元素,或通过键盘的"tab"键等方式,选择元素时,就是获取焦点.
<style>
/* 选中的是没有访问过的a元素 */
a:link
{
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited
{
color: gray;
}
/* 鼠标悬浮在链接上面 */
a:hover
{
color: skyblue;
}
/* 选中的是激活状a元素 */
a:active
{
color: green;
}
/* 获取焦点 */
input:focus
{
color: orange;
background-color: green;
}
</style>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<br>
<input type="text">
</body>二.常用伪类:
1. :first-child 所有兄弟元素中的第一个.
2. :last-child 所有兄弟元素中的最后一个.
3. :nth-child() 所有兄弟元素中的第N个.
4. :first-of-type 所有同类型兄弟元素中的第一个.
5. :last-of-type 所有同类型兄弟元素中的最后一个.
6. :nth-of-type() 所有同类型兄弟元素中的第N个.
三.否定伪类
:not(选择器) 排除满足括号条件的元素.
四.UI伪类
1. :checked 被选中的复选框或单选按钮.
2. :enable 可用的表单元素(没有disabled属性).
3. :disabled 不可用的表单元素(有disabled属性).
五.目标伪类(了解)
1. :target 选中锚点指向的元素.
六.语言伪类(了解)
1. :lang() 根据指定的语言选择元素(本质是看lang属性的值).
七.伪元素选择器
1.作用:就是元素中的一些特殊位置.
2.常用伪元素:
2.1 ::first-letter 选中元素中的第一个文字.
2.2 ::first-line 选中元素中的第一行文字.
2.3 ::selection 选中被鼠标选中的内容.
2.4 ::placeholder 选中输入框的提示文字.
2.5 ::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容.)
2.6 ::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容.)