css-pseudo-class锚伪类

CSS 伪类用于向某些选择器添加特殊的效果。

属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。

锚伪类

a:link {
    
    color: #FF0000}		/* 未访问的链接 */
a:visited {
    
    color: #00FF00}	/* 已访问的链接 */
a:hover {
    
    color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {
    
    color: #0000FF}	/* 选定的链接 */

:first-child伪类

p:first-child {
    
    font-weight: bold;}

选择器的优先级

在实际开发中,经常会为同一个标签设置多个样式。使用不同方式的选择器,由于其优先级不同,导致最终的效果也会不同。

选择器的优先级,具体如下:

  • 内联样式的优先级为 1000
  • ID 选择器的优先级为 100
  • 类选择器的优先级为 10
  • 元素选择器的优先级为 1
  • 通配符选择器的优先级为 0
  • 继承的样式没有任何优先级

值得注意的是:

  • 当一个样式中包含多个选择器时,需要将所有的选择器的优先级进行相加。
  • 优先级高的选择器优先显示,选择器的计算不会超过其最大的数量级。
  • 如果两个选择器的优先级相同,则哪个选择器最后定义才有效。
  • 如果某个选择器使用了 !important,则改选择器的优先级最高。

猜你喜欢

转载自blog.csdn.net/DeepLearning_/article/details/132713427
今日推荐