CSS学习随笔一之选择器介绍

勇敢_牛牛

已于 2023-12-28 09:59:41 修改

阅读量860

点赞数 32

文章标签： css 学习前端

于 2023-12-26 14:41:13 首次发布

本文链接：https://blog.csdn.net/qq_18429857/article/details/135089310

版权

1、CSS:层叠样式表，分为：行内样式、内部样式和外部样式。

2、样式的优先级：行内样式>内部样式=外部样式，内部样式和外部样式的优先级是后引入的覆盖先引入的，例如下面外部样式优先，所以显示红色。

<!DOCTYPE html>
<html lang="zh-CN">
    <head charset="UTF-8">
        <title>优先级测试</title>
        <style>
            color : bule;
        </style>
        <link rel="stylesheet" href="./test.css">
    </head>
    <body>
        <h1 clas="test">测试优先级</h1>
    </body>
</html>

./test.css
h1 {
    color : red;
}

3、伪类选择器：

（1）动态伪类：

:link（a标签独有）：超链接未被访问过的状态；

:visited（a标签独有）：超链接被访问过的状态；

:hover（所有标签都有）：鼠标悬停在元素上的状态;

:active（所有标签都有）：元素被激活的状态；

以上四个动态伪类选择器需要必须按照以上顺序，否则样式有可能不生效。

：focus(表单类元素独有，即能输入的元素独有)：获取元素的焦点

（2）结构伪类：

:first-child：所有兄弟元素中的第一个，注意是第一个

<!DOCTYPE html>
<HTML lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <styte>
            div>p:first-child{
                color: green;
            }
        </styte>
    <head>
    <body>
        <div>
            <!--变绿-->
            <p>first p</p>
            <!--不变绿-->
            <p>second p</p>
        </div>
        <div>
            <span>first span</span>
            <!--不变绿,因为div的子带元素中，第一个是span，不是p-->
            <p>first p</p>
            <!--不变绿-->
            <p>second p</p>
        </div>
    </dody>
</HTML>

:last-child：所有兄弟元素中的最后一个，注意是最后一个

:nth-child(n):所有兄弟元素中的第n个，关于 n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~正无穷的整数：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. -n+3 ：选中的是前 3 个。

:first-of-type：所有同类型兄弟元素中的第一个。

<!DOCTYPE html>
<HTML lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <styte>
            div>p:first-of-type{
                color: green;
            }
        </styte>
    <head>
    <body>
        <div>
            <!--变绿-->
            <p>first p</p>
            <!--不变绿-->
            <p>second p</p>
        </div>
        <div>
            <span>first span</span>
            <!--变绿,主意对比上文first-child-->
            <p>first p</p>
            <!--不变绿-->
            <p>second p</p>
        </div>
    </dody>
</HTML>

:last-of-type：所有同类型兄弟元素中的最后一个。

:nth-of-type(n)：所有同类型兄弟元素中的第n个。

以下了解即可：

1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。

3. :only-child 选择没有兄弟的元素（独生子女）。

4. :only-of-type 选择没有同类型兄弟的元素。

5. :root 根元素。

6. :empty 内容为空元素（空格也算内容）。

(3)否定伪类：

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

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <style>
            div>p:not(.notTest){
                color: green;
            }
        </style>
    <head>
    <body>
        <div>
            <!--不变绿-->
            <p class="notTest">first p</p>
            <!--变绿-->
            <p>second p</p>
        </div>
    </dody>
</html>

(4)UI伪类：

:checkd：被选中的复选框或单选按钮。

:disabled：不可用的表单元素（有 disabled 属性）。

:enable：可用的表单元素（没有 disabled 属性）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13_伪类选择器_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>

(5)、目标伪类（了解） :

target 选中锚点指向的元素。

(6)、语言伪类（了解） :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

4、伪元素选择器：

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

常用伪元素：

::first-letter 选中元素中的第一个文字。

::first-line 选中元素中的第一行文字。

::selection 选中被鼠标选中的内容。

::placeholder 选中输入框的提示文字。

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>16_伪元素选择器</title>
    <style>
        /* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 */

        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        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>

勇敢_牛牛

关注

32
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS学习随笔一之选择器介绍

2、样式的优先级：行内样式>内部样式=外部样式，内部样式和外部样式的优先级是后引入的覆盖先引入的，例如下面外部样式优先，所以显示红色。(6)、语言伪类（了解） :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。：focus(表单类元素独有，即能输入的元素独有)：获取元素的焦点。
复制链接

扫一扫