CSS复合选择器(二)

CSS复合选择器(二)

伪类选择器

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

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

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

  • 常用的伪类选择器:

一、动态伪类:

  1. : link 超链接未被访问的状态。
  2. :visited 超链接访问过的状态。
  3. : hover 鼠标悬停在元素上的状态。
  4. :active 元素激活的状态。

什么是激活?------ 按下鼠标不松开。

注意点:遵循LVHA 的顺序,即:link 、visited 、hover 、active 。

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

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

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

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_动态伪类</title>
    <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: orange;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: gray;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover {
            color: skyblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active {
            color: green;
        }
        /* 选中的是鼠标悬浮的span元素 */
        span:hover {
            color: green;
        }
        /* 选中的是激活的span元素 */
        span:active {
            color: red;
        }
        /* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */
        input:focus,select:focus {
            color: orange;
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>前端</span>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</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. 2 n+1 或 odd :选中序号为奇数的子元素。
  6. -n+3 :选中的是前3个。
  • 了解即可:
  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
  3. :only-child 选择没有兄弟的元素(独生子女)。
  4. :only-of-type 选择没有同类型兄弟的元素。
  5. : root 根元素。
  6. : empty 内容为空元素(空格也算内容)。

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类_1</title>
    <style>
        /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) ------ 看结构1 */
        /* div>p:first-child {
            color: red;
        } */

        /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) ------ 看结构2 */
        /* div>p:first-child {
            color: red;
        } */

        /* 选中的是div的后代p元素,且p的父亲是谁无所谓,但p必须是其父亲的第一个儿子(按照所有兄弟计算的) ------ 看结构3 */
        /* div p:first-child {
            color: red;
        } */

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

    <!-- 结构2 -->
    <!-- <div>
        <span>张三:98分</span>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
    </div> -->

    <!-- 结构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>
</body>
</html>
javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类_2</title>
    <style>
        /* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)------ 结构1*/
        /* div>p:first-child {
            color: red;
        } */

        /* 选中的是div的最后一个儿子p元素(按照所有兄弟计算的)------ 结构1*/
        /* div>p:last-child {
            color: red;
        } */
        
        /* 选中的是div的第n个儿子p元素(按照所有兄弟计算的)------ 结构1 */
        /* div>p:nth-child(3) {
            color: red;
        } */
    
        /* 选中的是div的偶数个儿子p元素(按照所有兄弟计算的)------ 结构2 */
        /* 关于n的值 ------ 结构2:
                1. 0或不写:什么都选不中 ------ 几乎不用。
                2. n :选中所有子元素  ------ 几乎不用。
                3. 1 ~ 正无穷的整数,选中对应序号的子元素。
                4. 2n 或 even  :选中序号为偶数的子元素。
                5. 2n+1 或 odd :选中序号为奇数的子元素。
                6. -n+3 : 选中前三个。
         */
        /* div>p:nth-child(2n) {
            color: red;
        } */
    
        /* 选中的是div的第一个儿子p元素(按照所有同类型兄弟计算的)------ 结构3 */
        /* div>p:first-of-type{
            color: red;
        } */

        /* 选中的是div的最后一个儿子p元素(按照所有同类型兄弟计算的)------ 结构3 */
        /* div>p:last-of-type{
            color: red;
        } */
        
        /* 选中的是div的第n个儿子p元素(按照所有同类型兄弟计算的)------ 结构3 */
        /* div>p:nth-of-type(5) {
            color: red;
        } */
    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
        <p>孙七:58分</p>
        <p>老八:48分</p>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
        <p>第1个</p>
        <p>第2个</p>
        <p>第3个</p>
        <p>第4个</p>
        <p>第5个</p>
        <p>第6个</p>
        <p>第7个</p>
        <p>第8个</p>
        <p>第9个</p>
        <p>第10个</p>
    </div> -->

    <!-- 结构3 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <span>测试2</span>
        <p>赵六:68分</p>
        <span>测试3</span>
        <p>孙七:58分</p>
        <span>测试4</span>
        <p>老八:48分</p>
        <span>测试5</span>
    </div> -->
</body>
</html>
javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构伪类_3</title>
    <style>
        /* 选中div中倒数第n个的儿子p元素(按照所有兄弟)------ 看结构1 */
        /* div>p:nth-last-child(3) {
            color: red;
        } */

        /* 选中div中倒数第n个的儿子p元素(按照所有同类型的兄弟)------ 看结构1 */
        /* div>p:nth-last-of-type(2) {
            color: red;
        } */
        
        /* 选中的是没有兄弟的span元素 ------ 看结构2 */
        /* span:only-child {
            color: red;
        } */

        /* 选中的是没有同类型兄弟的span元素 ------ 看结构2 */
        /* span:only-of-type {
            color: red;
        } */

        /* 选中的是根元素 */
        /* :root {
            background-color: gray;
        } */

        /* 选中的是没有内容的div元素 */
        /* div:empty {
            width: 100px;
            height: 100px;
            background-color: red;
        } */

    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
        <p>孙七:58分</p>
        <p>老八:48分</p>
        <span>测试2</span>
    </div> -->
    
    <!-- 结构2 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三:98分</p>
        <p>李四:88分</p>
        <p>王五:78分</p>
        <p>赵六:68分</p>
        <p>孙七:58分</p>
        <p>老八:48分</p>
    </div> -->

    <!-- 结构3 -->
    <div> </div>
</body>
</html>

三、否定伪类:

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

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_否定伪类</title>
    <style>
        /* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
        /* div>p:not(.fail) {
            color: red;
        } */

        /* 选中的是div的儿子p元素,但是排除title属性值以"你要加油"开头的 */
        /* div>p:not([title^="你要加油"]) {
            color: red;
        } */

        /* 选中的是div的儿子p元素,但排除第一个儿子p元素 */
        div>p:not(:first-child) {
            color: red;
        }
    </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 属性)。

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_UI伪类</title>
    <style>
        /* 选中的是勾选的复选框或单选按钮 */
        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>

五、目标伪类(了解)

:target 选中锚点指向的元素。

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_目标伪类</title>
    <style>
        div {
            background-color: gray;
            height: 300px;
        }
        div:target {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">去看第1个</a>
    <a href="#two">去看第2个</a>
    <a href="#three">去看第3个</a>
    <a href="#four">去看第4个</a>
    <a href="#five">去看第5个</a>
    <a href="#six">去看第6个</a>

    <div id="one">第1个</div>
    <br>
    <div id="two">第2个</div>
    <br>
    <div id="three">第3个</div>
    <br>
    <div id="four">第4个</div>
    <br>
    <div id="five">第5个</div>
    <br>
    <div id="six">第6个</div>
</body>
</html>

六、语言伪类(了解)

:lang() 根据指定的语言选择元素(本质是看lang 属性的值)。

代码如下:

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_语言伪类</title>
    <style>
        div:lang(en) {
            color: red;
        }
        :lang(zh-CN) {
            color: green;
        }
    </style>
</head>
<body>
    <div>北京</div>
    <div lang="en">上海</div>
    <p>前端</p>
    <span>你好</span>
</body>
</html>
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试