伪类选择器

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

一、动态伪类

  1. :link 超链接 未被访问 的状态。
  2. :visited 超链接 访问过 的状态。
  3. :hover 鼠标 悬停 在元素上的状态。
  4. :active 元素 激活 的状态。
    什么是激活? ------ 按下鼠标不松开。
    注意点:遵循 LVHA 的顺序,即: link 、 visited 、 hover 、 active 。
  5. :focus 获取焦点的元素
    表单类元素才能使用 :focus 伪类。
    当用户:点击元素、触摸元素、或通过键盘的 " tab " 键等方式,选择元素时,就是获
    得焦点。
html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器动态伪类</title>

    <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: green;
        }

        /* 选中的是访问过的a元素 */
        a:visited {
            color: red;
        }

        /* :hover 鼠标悬停在元素上的状态。 */
        a:hover {
            color: blue;
        }

        /* 4. :active 元素激活(按下鼠标不松开。)的状态  */
        a:active {
            color: chocolate;
        }

        /* 5. :focus 获取焦点的元素。 
        当用户:点击元素、触摸元素、或通过键盘的 " tab " 键等方式,选择元素时,就是获
得焦点。 */
        input:focus,
        select:focus  {
            background-color: aqua;
            color: red;

        }
     
    </style>

</head>

<body>

    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <input type="text">
    <select >
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>

</html>

二、结构伪类

常用的:

1. :first-child 所有兄弟元素中的第一个。
2. :last-child 所有兄弟元素中的最后一个。
3. :nth-child(n) 所有兄弟元素中的第 n 个。
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型兄弟元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
关于 n 的值:
1. 0 或 不写 :什么都选不中 ------ 几乎不用。
2. n :选中所有子元素 ------ 几乎不用。
3. 1~正无穷的整数 :选中对应序号的子元素。
4. 2n 或 even :选中序号为偶数的子元素。
5. 2n+1 或 odd :选中序号为奇数的子元素。
6. -n+3 :选中的是前 3 个。

html 复制代码
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)*/

div >p:first-child{
            color: red;
        }


<div>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div> 

html 复制代码
 /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)
      因为div下的儿子符合条件的是李四但是 第一个儿子选中的范围是第一个张三,
      张三没有p标签所以无效
        div>p:first-child {
            color: red;
        }

 <div>
        <span>张三:98分</span>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div>
html 复制代码
 /* 选中的是div的后代p元素,且p的父亲是谁无所谓,
        但p必须是其父亲的第一个儿子(按照所有兄弟计算的) ------ 看结构3 */
        div p:first-child {
            color: red;
        }
  <!-- 结构3 -->
   <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三:98分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div> 
java 复制代码
 /* 选中的是其父亲的第一个儿子的 */  
p:first-child {
            color: red;
        }
 <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三:98分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div> 

三、否定伪类

:not( 选择器 ) 排除满足括号中条件的元素。

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器否定伪类</title>

    <style>
    /* :not(选择器) 排除满足括号中条件的元素。 */
    /* div>p:not([class="fail"]){
        color: blue;

    } */
        /* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
        /* div>p:not(.fail){
            color: chocolate;
        } */
         div>p:not(:first-of-type){
            color: chartreuse;
         }
    </style>

</head>

<body>
   <div>
    <p>张三:98分</p>
    <p>李四:88分</p>
    <p>王五:78分</p>
    <p>赵六:68分</p>
    <p class="fail" title="你要加油啊!孙七">孙七:58分</p>
    <p class="fail" title="你要加油啊!老八">老八:48分</p>
   </div>
</body>

</html>

四、UI伪类:

  1. :checked 被选中的复选框或单选按钮。
  2. :enable 可用的表单元素(没有 disabled 属性)。
  3. :disabled 不可用的表单元素(有 disabled 属性)。
html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器UI伪类</title>

    <style>
        /* 四、UI伪类:
1. :checked 被选中的复选框或单选按钮。
2. :enable 可用的表单元素(没有 disabled 属性)。
3. :disabled 不可用的表单元素(有 disabled 属性)。 */

        /* 选中的是是元素选择器input  的复选框或单选按钮*/
        input:checked {
            width: 100px;
            height: 100px;
        }

        /* 选中的是被禁用的input元素 */
        input:disabled {
            background-color: gray;
        }

        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: green;
        }
    </style>

</head>

<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="text">
    <input type="text" disabled>
</body>

</html>

五、伪元素选择器

作用:选中元素中的一些特殊位置。

常用伪元素:
::first - letter 选中元素中的 第一个文字
::first - line 选中元素中的 第一行文字
::selection 选中 被鼠标选中的 内容。
::placeholder 选中输入框的 提示文字
::before 在元素 最开始 的位置,创建一个子元素(必须用 content 属性指定内容)。
::after 在元素 最后 的位置,创建一个子元素(必须用 content 属性指定内容)。

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器伪元素选择器</title>

    <style>
        /* 常用伪元素:
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。
::after 在元素最后的位置,创建一个子元素(必须用 content 属性指定内容)。 */

        /* 什么是伪元素? ------ 很像元素,但不是元素(element),是元素中的一些特殊位置 */
        /* ::first-letter 选中元素中的第一个文字。 */
        div::first-letter {
            font-size: 50px;
            color: aqua;
        }
        /* ::first-line 选中元素中的第一行文字。 */
        div::first-line{
            background-color: greenyellow;
        }
        /* ::selection 选中被鼠标选中的内容。 */
        div::selection{
            color: red;
        }

        /* ::placeholder 选中输入框的提示文字。 */
        input::placeholder{
            background-color:gold ;
        }
        /* ::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。 */
        p::before{
            content:"¥";
        }
        p::after{
            content:".00";
        }
    </style>

</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi,
        exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est
        placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex
        voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis
        perspiciatis. Facere?</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>

</html>
相关推荐
小磊哥er2 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮13 分钟前
webpack基础
前端·webpack
移动开发者1号29 分钟前
深入理解原子类与CAS无锁编程:原理、实战与优化
android·kotlin
陈卓41030 分钟前
MySQL-主从复制&分库分表
android·mysql·adb
YongGit32 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
移动开发者1号33 分钟前
深入理解 ThreadLocal:原理、实战与优化指南
android·kotlin
zhangphil34 分钟前
Android PNG/JPG图ARGB_8888/RGB_565‌解码形成Bitmap在物理内存占用大小的简单计算
android
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
厦门德仔1 小时前
【WPF】WPF(样式)
android·java·wpf
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端