10.4（CSS）

最新推荐文章于 2025-12-09 13:48:31 发布

原创最新推荐文章于 2025-12-09 13:48:31 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

1.CSS复合选择器（接上篇笔记）

（3）后代选择器：选中指定元素中，符合要求的后代元素

（选择器之间，用空格隔开）（先写祖先，再写后代）

/*选中u1中的所有li */
ul li {
    color: red;
}
/*选中ul中所有li中的a */
ul li a {
    color: blue;
}
/*选中类名为subject元素中的所有li */
.subject li {
    color: orange;
}
/*选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
    color: yellow
}

后代选择器，最终选择的是后代（儿子，孙子，重孙子），不选中祖先

结构一定要符合之前讲的 HTML 嵌套要求，例如:不能p中写h1 ~ h6

（4）子代选择器：选中指定元素中，符合要求的子元素(儿子元素)

（选择器之间，用 > 隔开）（先写父，再写子）

/*div中的子代a元素 */
div>a {
    color: red;
}
/*类名为persons的元素中的子代a元素*/
.persons>a {
    color: blue;
}

子代选择器，最终选择的是子代，不是父级

子、孙子、重孙子、重重孙子 …. 统称后代!，子就是指儿子

（5）兄弟选择器

1 相邻兄弟选择器：选中指定元素后，符合条件的相邻（紧挨着他的下一个）兄弟元素

/*选中div后相邻的兄弟p元素 */
div+p {
    color: blue;
}

2 通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素

/*选中div后的所有的兄弟p元素*/
div~p {
    color: blue;
}

两种兄弟选择器，选择的是下面的兄弟

（6）属性选择器：选中属性值符合一定要求的元素

/*选中具有title属性的元素 */
div[title] {
    color: blue;
}
/*选中title属性值为htl的元素*/
div[title="htl"] {
    color: red;
}
/*选中title属性值以a开头的元素 */
div[title^="a"] {
    color: green;
}
/*选中title属性值以l结尾的元素*/
div[title$="l"] {
 color: orange;
}
/*选中title属性值包含h的元素*/
div[title*="h"] {
    color: yellow;
}

（7）伪类选择器：选中特殊状态的元素【像类( class)，但不是类，是元素的一种特殊状态】

一、动态伪类

/* 选中的是没有访问过的a元素 */
a.link {
    color: blue;
}
/* 选中的是访问过的a元素 */
a.visited {
    color: red;
}
/* 选中的是鼠标悬浮状态下的span元素 */
span.hover {
    color: green;
}
/* 选中的是激活状态下的a元素 */
a.active {
    color: yellow;
}
 /* focus只有表单类元素可以用 */
input:focus {
    background-color: pick;
    color: black;
}
select:focus {
    background-color: gray;
    color: brown;
}

遵循LVHA 的顺序，即:link、visited、hover、active

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

二、结构伪类

  /* 选中的是div的第一个儿子p元素(按照所有孩子计算的)*/
div>p:first-child {
    color: blue;
}
 /* 选中的是p元素，且父亲是谁无所谓，但p必须是其父亲的第一个儿子(按照所有孩子计算的) */
p:first-child {
    color: red;
}
/* 选中的是div的最后一个儿子p元素(按照所有孩子计算的) */
div>p:last-child {
    color: yellow;
}
 /* 选中的是div的第n个儿子p元素(按照所有孩子计算的) */
div>p:nth-child(3) {
    color: pick;
}
/* 选中的是div的偶数个儿子p元素(按照所有孩子计算的) */
div>p:nth-child(2n) {
    color: brown;
}
/* 选中的是div的第一个儿子p元素(按照所有同类型孩子计算的) */
div>p:first-of-type {
    color: black;
}
/* 选中没有兄弟的span元素 */
span:only-child {
    color: green;
}
/* 选中没有同类型兄弟的span元素 */
span:only-of-type {
    color: blue;
}
/* 选中的是根元素(HTML) */
:root {
    background-color: red;
}
/* 选中的是没有内容的div元素 */
div:empty {
    width: 200px;
    height: 200px;
    background-color: gray;
}

三、否定伪类

:not （选择器）：排除满足括号中条件的元素

 /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
div>p:not(.fail) {
    color: blue;
}
 /* 选中的是div的儿子p元素，但是排除title属性值以“你要加油”开头的 */
div>p:not([title^="你要加油"]) {
    color: red;
}
/* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */
div>p:not(:first-child) {
    color: green;
}

四、UI伪类

 /* 选中的是勾选的复选框或单选按钮 */
input:checked {
    width: 100px;
    height: 100px;
}
 /* 选中的是被禁用的input元素 */
input:disabled {
    background-color: black;
}
/* 选中的是可用的input元素(几乎不用) */
input:enable {
    background-color: brown;
}

五、目标伪类（了解）

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

div:target {
    color: blue;
}

六、语言伪类（了解）

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

div:lang(en) {
    color: blue;
}

(8)伪元素选择器：选中元素中的一些特殊位置

/* 选中的是div中的第一个文字 */
div::first-letter {
    color: blue;
}
/* 选中的是div中第一行的文字 */
div::first-line {
    color: red;
}
/* 选中的是div中被鼠标选中的文字 */
div::selection {
    color: green;
    backcolor: black;
}
 /* 选中的是input元素中的提示文字 */
input::placeholder {
    color: yellow;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before {
    content: "￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p:after {
    content: ".00"
}

2.选择器的优先级

（行内样式 >ID选择器 > 类选择器 > 元素选择器 > 通配选择器）

格式：（a，b，c）

a :ID选择器的个数

b:类、伪类、属性选择器的个数

c:元素、伪元素选择器的个数

比较规则:按照从左到右的顺序，依次比较大小（若全部相同，按照“后来者居上”的原则）

行内样式 > 所有选择器；

!important权重最高!(!important>行内样式>所有选择器)

3.CSS三大特性

（1）层叠性：当发生了样式冲突（元素的同个样式名，设置了不同的值），就会根据选择器优先级，进行样式的层叠(覆盖)

（2）继承性：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式（优先继承离得近的）

常见的可继承属性：text-?? , font-?? , line-?? , color

（3）优先级：!important>行内样式 >ID选择器 >类选择器 > 元素选择器 >*>继承的样式

需要计算权重（并集选择器的每一个部分是分开算的!）

4.颜色的表示

（1）颜色名：直接使用颜色对应的英文单词

<style>
    div {
        color: blue;
}
</style>

(2)rgb或rgba：使用红、黄、蓝这三种光的三原色进行组合

r (red)表示红色 g (green)表示绿色 b (blue)表示蓝色 a 表示透明度

/*使用~255 之间的数字表示一种颜色 */
color: rgb(255,0,0);/*红色*/
color: rgb(0,255,0);/*绿色*/
color: rgb(0,0,255);/*蓝色*/
color:rgb(8，0，0);/*黑色*/
color:rgb(255，255，255);/*白色*/

/*混合出任意一种颜色 */
color:rgb(138，43，226)/*紫罗兰色*/
color:rgba(255，0，0，0.5);/*半透明的红色*/

/*也可以使用百分比表示一种颜色(用的少)*/
color:rgb(108%，8%，8%);/*红色*/
color:rgba(108%，8%，8%，50%);/*半透明的红色*/

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅

rgb(0,0,0)是黑色，rgb(255,255,255)是白色

对于 rgba 来说，前三位的 rgb 形式要保持一致，要么都是0~255的数字，要么都是百分比

（3）HEX或HEXA：红、绿、蓝色进行组合，只要用 6个数字，分成3组来表达

每一位数字的取值范围是:0~f，即:(0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f)

【最小值是: 00，最大值是: ff】

color:#ff0000;/* 红色 */
color:#00ff00;/* 绿色 */
color:#0000ff;/* 蓝色 */
color:#000000;/* 黑色 */
color:#ffffff;/* 白色 */

/*每种颜色的两位都相同的，可以简写*/
color:#ff9988;/* 可简为:#f98 */

/*注意前三位简写了，透明度也要简写*/
color:#ff998866;/* 可简为:#f986 */

（4）HSL或HSLA：通过色相、饱和度、亮度，来表示颜色

色相:取值范围是 8~360度

饱和度:取值范围是0%~100%(向色相添加灰色，0%全灰，100%没有灰)

亮度:取值范围是0%~100%(0%是黑色；100%是白色)

color: hsl(0, 30%, 50%);

color: hsla(240,30%,50%);

作业

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
    <style>
         div[title="dah"]>span {
            line-height: 80px;
            display: flex;
            margin-bottom: 10px;
            display: inline-block;
            height: 80px;
            width: 90px;
            border-radius: 10px;
            border: 1px solid #000;
            text-align: center;
         }
          div[title="dah"]>span:first-child {
            width: 50px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color:rgb(204,242,255);
          }
          div[title="dah"]>span:last-child {
            width: 150px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color:rgb(0, 191, 255);
          }
        div[title="dbh"]>span {
            line-height: 80px;
            display: flex;
            margin-bottom: 10px;
            display: inline-block;
            height: 80px;
            width: 90px;
            border-radius: 10px;
            border: 1px solid #000;
            text-align: center;
        }
        div[title="dbh"]>span.a1 {
            width: 100px;
            border-radius: 10px;
            border: 1px solid #000;
        }
         div[title="dch"]>span {
            line-height: 80px;
            display: flex;
            margin-bottom: 10px;
            display: inline-block;
            height: 80px;
            width: 90px;
            border-radius: 10px;
            border: 1px solid #000;
            text-align: center;
         }
         div[title="dch"]>span:first-child {
            width: 170px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color: rgb(252, 228, 236);
        }
         div[title="dch"]>span:last-child {
            width: 120px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color: rgb(252, 228, 236);
        }
         div[title="ddh"]>span {
            line-height: 80px;
            display: flex;
            margin-bottom: 10px;
            display: inline-block;
            height: 80px;
            width: 90px;
            border-radius: 10px;
            border: 1px solid #000;
            text-align: center;
         }
        div[title="ddh"]>span:first-child {
            width: 200px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color: rgb(252, 228, 236);
        } 
         div[title="ddh"]>span:last-child {
            width: 180px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color: rgb(252, 228, 236);
        }
        div[title="deh"]>span {
            line-height: 80px;
            display: flex;
            margin-bottom: 10px;
            display: inline-block;
            height: 80px;
            width: 90px;
            border-radius: 10px;
            border: 1px solid #000;
            text-align: center;
            background-color: rgb(252, 228, 236)
        }
         div[title="deh"]>span.kg {
            width: 470px;
            border-radius: 10px;
            border: 1px solid #000;
            background-color: rgb(252, 228, 236);
        } 
    </style>
</head>
<body>
    <div title="dah">
        <span >~</span>
        <span style="background-color: rgb(171, 233, 253);">1</span>
        <span style="background-color: rgb(165, 232, 255);">2</span>
        <span style="background-color: rgb(159, 230, 254);">3</span>
        <span style="background-color: rgb(149, 226, 252);">4</span>
        <span style="background-color: rgb(135, 222, 251);">5</span>
        <span style="background-color: rgb(120, 218, 250);">6</span>
        <span style="background-color: rgb(115, 214, 247);">7</span>
        <span style="background-color: rgb(101, 212, 249);">8</span>
        <span style="background-color: rgb(92, 211, 251);">9</span>
        <span style="background-color: rgb(83, 204, 245);">0</span>
        <span style="background-color: rgb(75, 204, 247);">-</span>
        <span style="background-color: rgb(63, 202, 248);">+</span>
        <span>x</span>
    </div>
    <div title="dbh">
        <span class="a1" style="background-color: rgb(252, 228, 236);">Tab</span>
        <span style="background-color: rgb(230, 218, 250);">Q</span>
        <span style="background-color: rgb(219, 198, 253);">W</span>
        <span style="background-color: rgb(214, 192, 250);">E</span>
        <span style="background-color: rgb(209, 186, 245);">R</span>
        <span style="background-color: rgb(200, 166, 254);">T</span>
        <span style="background-color: rgb(192, 154, 253);">Y</span>
        <span style="background-color: rgb(176, 128, 252);">U</span>
        <span style="background-color: rgb(163, 111, 247);">I</span>
        <span style="background-color: rgb(156, 98, 250);">O</span>
        <span style="background-color: rgb(141, 72, 252);">P</span>
        <span style="background-color: rgb(130, 55, 250);">(</span>
        <span style="background-color: rgb(114, 29, 250);">)</span>
        <span class="a1" style="background-color: rgb(252, 228, 236);">\</span>
    </div>
    <div title="dch">
        <span>Caps</span>
        <span style="background-color: rgb(252, 201, 219);">A</span>
        <span style="background-color: rgb(255, 192, 214);">S</span>
        <span style="background-color: rgb(252, 178, 204);">D</span>
        <span style="background-color: rgb(255, 163, 195);">F</span>
        <span style="background-color: rgb(252, 145, 183);">G</span>
        <span style="background-color: rgb(253, 130, 173);">H</span>
        <span style="background-color: rgb(246, 112, 159);">J</span>
        <span style="background-color: rgb(251, 97, 151);">K</span>
        <span style="background-color: rgb(254, 83, 143);">L</span>
        <span style="background-color: rgb(252, 62, 129);">;</span>
        <span style="background-color: rgb(254, 48, 120);">"</span>
        <span>Enter</span>
    </div>
    <div title="ddh">
        <span>Shift</span>
        <span style="background-color: rgb(255, 230, 180);">Z</span>
        <span style="background-color: rgb(251, 222, 164);">X</span>
        <span style="background-color: rgb(248, 217, 156);">C</span>
        <span style="background-color: rgb(244, 206, 130);">V</span>
        <span style="background-color: rgb(254, 210, 121);">B</span>
        <span style="background-color: rgb(252, 204, 107);">N</span>
        <span style="background-color: rgb(252, 201, 97);">M</span>
        <span style="background-color: rgb(254, 197, 83);">,</span>
        <span style="background-color: rgb(250, 190, 71);">.</span>
        <span style="background-color: rgb(252, 186, 55);">?</span>
        <span>Shift</span>
    </div>
    <div title="deh">
        <span>Ctrl</span>
        <span>Fn</span>
        <span>win</span>
        <span>Alt</span>
        <span class="kg">空格</span>
        <span>Alt</span>
        <span>Ctrl</span>
        <span><</span>
        <span>up&down</span>
        <span>></span>
    </div>
</body>
</html>