从0开始，自学前端的一点记录——CSS选择器

Y_ZERO_O

已于 2023-04-13 21:15:19 修改

阅读量654

点赞数

分类专栏：前端文章标签：前端 css3

于 2023-04-13 20:32:53 首次发布

本文链接：https://blog.csdn.net/qq_43600631/article/details/130128501

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的第一篇博客，或者说自学前端的日记吧

学了几天才想起来可以写个博客当笔记用，但是又不想重头重新整理了，就从这里开始吧。

CSS选择器

1. 基本选择器

1.1 通配选择器

选中html所有元素
* {
属性名: 属性值;
}

1.2 元素选择器

选择某种元素设置样式
标签名 {
属性名: 属性值;
}
例如：
h1 {
color: orange;
}
为h1设置橙色

1.3 类选择器

根据元素的 class ，来选择
类名 {
属性名: 属性值;
}
例如：
.student{
color: blue;
}
给学生类型设置为蓝色

1.4 id选择器

根据元素 id 值，来选中某个元素
#id值 {
属性名: 属性值;
}
例如：
#student{
color: red;
}
id值：由字母、数字、下划线_、短横线-组成，以字母开头，区分大小写
一个元素只能有一个id
id不能重复

2. 复合选择器

2.1 交集选择器

选择同时符合多个条件的(类比数学里的交集)

选择器1选择器2选择器3...选择器n {}

例如：

类名为student的p元素
p.student{
color: blue;
}
类名既有student又有adult的元素
.student.adult{
    color: blue;
}
注：

标签名得在前面
不可能出现两个元素选择器（p，h1，span...）

2.2 并集选择器

选择多个选择器对应的，满足一个即可(类比数学里的并集)

选择器1,选择器2,选择器3,...,选择器n {}

例如：

选中类名为CUIT或BLOCKCHAIN或id为AI或p元素
.CUIT,
.BLOCKCHAIN,
#AI,
p{
background-color: skyblue;
}

2.3 后代（儿子，孙子...）选择器

选中符合要求的后代元素（可以隔着很多代，父子，爷孙...）

选择器1 选择器2 选择器3 ...... 选择器n {}

（祖先在前，后代在后，空格分隔）

例如

ul中的li
ul li {
color: red;
}

2.4 子代（儿子）选择器

选中符合要求的子元素(儿子，就差一代，父子)

选择器1>选择器2>选择器3>......>选择器n {}

（父在前，子在后，>分隔）

例如：

div中的a元素
div>a {
color: red;
}

2.5 兄弟选择器

相邻兄弟选择器

选中指定元素后，符合条件的相邻兄弟元素。（紧紧相邻，向下）

选择器1+选择器2 {}

例如：

div后紧邻的p，如果第一个不是p，则没有选中
div+p {
color:red;
}

通用兄弟选择器

选中指定元素后，所有符合条件的兄弟元素。（下面的符合的，都行）

选择器1~选择器2 {}

例如：

选择div后的所有兄弟p元素
div~p {
color:red;
}

2.6 属性选择器

选择属性值符合一定要求的元素

[属性名] {} 具有某个属性的元素。
[属性名="值"] {} 包含某个属性，且属性值等于指定值的元素。
[属性名^="值"] {} 选中包含某个属性，且属性值以指定开头的元素。
[属性名$="值"] {} 选中包含某个属性，且属性值以指定结尾的元素。
[属性名*=“值”] {} 选择包含某个属性，属性值包含指定值的元素。
/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为student的元素 */
div[title="student"]{color:blue;}
/* 选中title属性值以s开头的元素 *
div[title^="s"]{color:yellow;}
/* 选中title属性值以t结尾的元素 */
div[title$="d"]{color:green;}
/* 选中title属性值包含tud的元素 */
div[title*="tud"]{color:gray;}

2.7 伪类选择器

一、动态伪类

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

一定要按这个顺序（记忆口诀：lvha “lv哈”）

二、结构伪类

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构选择器</title>
    <style>
    </style>
</head>
<body>
    <div>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老九：38分</p>
        <p>老八：48分</p>
    </div>
</body>
</html>

:first-child 所有兄弟元素中的第一个元素。
:last-child 所有兄弟元素中的最后一个元素。
:nth-child(n) 所有兄弟元素中的第 n 个元素。
0 或不写：没有选中目标，
n ：选中所有子元素，
1~+ $\infty$ ：选中对应序号的子元素，
2n 或 even ：偶数，
 p {font-size: 2px;}
 div>p:first-child {color: red;}
 div>p:last-child {color: blue;}
 div>p:nth-child(3) {color: yellow}
 div>p:nth-child(2n) {color: green}
2n+1 或 odd ：奇数，
div>p:nth-child(2n+1) {color: blue}
-n+3 ：前 3 个，

n+3：从第四个开始，
:nth-child(n+4):nth-child(-n+8)：3-6个。
div>p:nth-child(n+3):nth-child(-n+6){color: blue}
:first-of-type 所有同类型兄弟元素中的第一个元素。
:last-of-type 所有同类型兄弟元素中的最后一个元素。
:nth-of-type(n) 所有同类型兄弟元素中的第n个元素。
 aaa
 张三：98分
 李四：88分
 王五：78分
 赵六：68分
 孙七：58分
 老九：38分
 老八：48分
 bbb
不常用的几个：
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 没有兄弟的元素（独生子女）。
:only-of-type 没有同类型兄弟的元素。
:root 根元素（html）。
:empty 内容为空元素（空格也算内容，不声明高和宽，看不见效果）。

三、否定伪类

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_结构选择器</title>
    <style>
        /*排除失败的*/
        div>p:not(.fail){
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>张三：98分</p>
        <p>王五：78分</p>
        <p title="加油">赵六：68分</p>
        <p class="fail">孙七：58分</p>
        <p class="fail">老九：38分</p>
    </div>
</body>
</html>

/*排除title是加油的*/
div>p:not([title="加油"]){
            color: red;
        }

/*排除p兄弟里面第一个*/
div>p:not(:first-child){
            color: red;
        }

四、UI伪类

:checked 被选中的复选框或单选按钮。（不能改变颜色）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>UI伪类</title>
 <style>
 input:checked{
 width: 100px;
 height: 100px;
 }
 </style>
</head>
<body>
 <input type="checkbox">
</body>
</html>
勾选前勾选后

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

五、目标伪类（了解）

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

六、语言伪类（了解）

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

这里全局控制

2.8 伪元素选择器

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

::first-letter 第一个文字

::first-line 第一行文字

::selection 被鼠标选中的内容

::placeholder 输入框的提示文字

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

3. 选择器的优先级（权重）

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

权重(a,b,c)

a：ID选择器个数

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

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

按顺序比较a、b、c，一旦有一个胜出，就停止比较，都相等，就后来者居上

注：

!important权重最大

div:lang(zh-CN) {
            color:red !important;
        }

并集的权重分开计算，不叠加

Y_ZERO_O

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录