web课程笔记（css--选择器）

最新推荐文章于 2024-08-13 11:55:13 发布

步黔

最新推荐文章于 2024-08-13 11:55:13 发布

阅读量60

点赞数

文章标签：前端笔记 css

本文链接：https://blog.csdn.net/weixin_72380152/article/details/131868998

版权

css的三种样式：行内样式内部样式外部样式

行内样式：

    <div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>

内部样式：

<style>

选择器 {

；；；

}

<style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内部样式 */
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

外部样式：引用外部样式

    <link rel="stylesheet" href="./13-外部样式.css">

外部样式直接编辑即可引用

基础选择器：

四种基础选择器：标签选择器 id选择器类（class）选择器通配符选择器

标签选择器：标签 {}

id选择器：#id号 {}

类选择器：.class号 {}

通配符（全选）选择器：* {}

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器:选中当前页面中所有符合标签 */
        h1 {
            color: rgb(32, 27, 28);
        }

        /* id选择器   #id*/
        #box1 {
            color: rgb(6, 106, 194);
        }

        /* 类选择器   .类名 */
        .box1 {
            background-color: pink;
        }

        /* 通配符选择器  选中所有的元素*/
        * {
            font-size: 60px;
        }
    </style>
</head>

<body>
    <div>我是一个不允许编辑的盒子</div>
    <p>我是一段文字</p>
    <h1 class="box1">我是标题</h1>
    <div id="box1">我是一个不允许编辑的盒子</div>
    <div class="box1">我是一个不允许编辑的盒子</div>


</body>

</html>

包含选择器：子代选择器后代选择器

子代选择器 ”>“（只选择亲生儿子不选孙子）：元素1>元素1.1{}

后代选择器 " "（选择后代的所有符合的选项）：元素1 元素1.1 {}

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   只选中亲生儿子 */
        ul>li {
            background-color: pink;
        }

        /* 后代选择器 */
        /* css样式表存在层叠性，后边的会将前边的覆盖掉 */
        ul li {
            background-color: aqua;
        }

        ul div>li {
            background-color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <div>
            <li>我是孙子</li>
            <li>我是孙子</li>

        </div>

    </ul>
</body>

</html>

逗号选择器：元素1,元素2,元素3 {} 可同时选中多个标签

属性选择器：元素[属性=”“] {}

    <style>
        input[type="text"] {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aqua;
        }

        input[name] {
            background-color: red;
        }

        /*   *type的属性值里包含e的input元素 
        */
        input[type*="e"] {
            background-color: blueviolet;
        }
/* 以p开头的 */
        input[type^="p"] {
            background-color: chartreuse;
        }
/* 以l结尾的 */
        input[type$="l"] {
            background-color: red;
        }
    </style>

伪类选择器（元素在不同状态下的样式）：元素:伪类选择器 {}

:link(访问来时的样式)

:visited(访问之后的样式)

:focus(获取焦点tab时的样式)

:hover(鼠标悬停时的样式)

:active(鼠标按住时的样式)

:伪类选择器+元素（+代表下一个）

:伪类选择器~元素（~代表之后的所有兄弟元素）

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a:link 、a:visited 、a:hover 、a:active */
        /* 伪类选择器：元素在不同状态下的样式 */
        /* ：link    为访问的来凝结样式 */
        a:link {
            color: green;
        }



        /* 访问之后的样式 */
        a:visited {
            color: red;
        }

        /* 获取焦点时的样式 */
        a:focus {
            color: blue;
        }

        /* 鼠标悬停时的样式 */
        /* 
       +表示下一个
            ~表示之后所有的兄弟元素 */

        a:hover+div {
            color: pink;
        }

        /* active     用户点击之后按住鼠标 */
        a:active {
            background-color: pink;
        }

        div:hover {
            background-color: pink;
        }
    </style>
</head>

<body>
    <a href="#">点击我去百度

    </a>
    <div>我是一个div</div>
</body>

</html>

结构伪类选择器：

元素1 元素1.1:nth-child() {} 正序第几个

元素1 元素1.1:last-child {} 倒数第一个

元素1 元素1.1:first-child {} 正数第一个

元素1 元素1.1:nth-child2n+1) {} 奇数个

元素1 元素1.1:nth-child(2n) {} 偶数个

.father .son:nth-child(2) {}

/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */

.father .son:nth-of-type(2) {}

/* 先找.father，再找.father里的.son，然后对.son进行排序 */

例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(9) {
            background-color: pink;
        }

        ul li:last-child {
            background-color: red;
        }

        ul li:first-child {
            background-color: aqua;
        }

        ul li:nth-child(2n+1) {
            background-color: blue;
        }

        ul li:nth-child(2n) {
            background-color: rgb(33, 227, 124);
        }
    </style>
</head>

<body>
    <ul>

        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
        <li>我是li7</li>
        <li>我是li8</li>
        <li>我是li9</li>
        <li>我是li10</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
        .father .son:nth-child(2) {
            background-color: pink;
        }


        /* 先找.father，再找.father里的.son，然后对.son进行排序 */
        .father .son:nth-of-type(2) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <p>nihao</p>1
        <div class="son">我是盒子</div>2
        <div class="son">我是盒子</div>3
        <div class="son">我是盒子</div>4
        <div class="son">我是盒子</div>5

    </div>
</body>

</html>

伪元素选择器：

元素::befor {

content:"";

color: ;

}选中元素的前面

元素::after {}

选中元素的后面

::placeholder 内部提示字体样式input::placeholder

::selection 被选中时的样式

例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before {
            content: "##3#";
            color: pink;
        }

        p::after {
            content: "and you";
            color: red;
        }

        input::placeholder {

            color: pink;
        }

        div::selection {
            color: aqua;
        }
    </style>
</head>

<body>
    <p>我叫缑欣</p>
    <p>我叫缑欣</p>
    <p>我叫缑欣</p>
    <input type="text" placeholder="请输入用户名：">
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur
        doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident
        eius et ipsum ratione laudantium!
 

    </div>
</body>

</html>