CSS中伪类选择器

作用:选中特殊状态的元素

如何理解"伪"?--虚假的,不真实的

如何理解"伪类"?--像类(class),但是不是类,是元素的一种特殊的状态.

一.动态伪类选择器

  1. :link 超链接未被访问的状态;

  2. :visited 超链接访问过的状态;

  3. :hover 鼠标悬停在元素上的状态;

  4. :active 元素激活的状态.

什么是激活状态?

按下鼠标不松开.

注意点:

以上的顺序是不能变动的,否则将会失效部分功能.

  1. :focus 获取焦点的元素.

表单元素才能使用:focus伪类;

当用户点击元素,触摸元素,或通过键盘的"tab"键等方式,选择元素时,就是获取焦点.

html 复制代码
 <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属性指定内容.)

相关推荐
天生我材必有用_吴用2 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
拳打南山敬老院10 分钟前
从零构建一个插件系统(四)插件的缓存
javascript·架构
Sobeit10 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc17 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮23 分钟前
dify二开示例
前端·后端·python
该用户已不存在26 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin35 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦39 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七44 分钟前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux