css选择器笔记

css html
笔记
发布日期:   2023-11-28
更新日期:   2023-12-05
文章字数:   2.4k
阅读时长:   9 分
阅读次数:  

css选择器语法

1 简单选择器

1.1 通配选择器

可以选中所有的 HTML 元素，一般用于清除样式

*{
}

1.2元素选择器

p{
}
h1{
  color:blue
}

1.3 类选择器

类名{
}

class 值，按照标准：
不要使用纯数字，不要使用中文，尽量使用英文与数字的组合
若由多个单词组成，使用 - 做连接，例如:left-menu ，且命名要有意义，做到见名知意。
一个元素不能写多个 class 属性，而是 class 属性能写多个值，要用空格隔开

1.4 id选择器

#id{
    }

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头，不要包含空格，区分大小写
一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同一个元素可以同时拥有 id 和 class 属性

2 复合选择器

2.1 交集选择器

选中同时符合多个条件的元素
选择器1选择器2选择器3…选择器n {}

/* 选中：类名为beauty的p元素，为此种写法用的非常多！ */
p.beauty {
    color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

有标签名，标签名必须写在前面
id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span元素
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

2.2并集选择器

选中多个选择器对应的元素，又称分组选择器

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

并集选择器一般竖着写，用逗号隔开。并集选择器，通常用于集体声明，可以缩小样式表体积
任何形式的选择器，都可以作为并集选择器的一部分
HTML元素间的关系
父元素：直接包裹某个元素的元素，就是该元素的父元素
子元素：被父元素直接包含的元素
祖先元素：父亲的父亲.......，一直往外找，都是祖先
父元素，也算是祖先元素的一种
后代元素：儿子的儿子......，一直往里找，都是后代
子元素，也算是后代元素的一种
兄弟元素：具有相同父元素的元素，互为兄弟元素

2.3 后代选择器

选中指定元素中符合要求的后代元素
选择器1 选择器2 选择器3 …… 选择器n {} （先写祖先，再写后代）
选择器之间，用空格隔开
选择器 1 2 3 4…n ，可以是上面学的任何一种选择器

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

后代选择器，最终选择的是后代，不选中祖先

儿子、孙子、重孙子都算是后代

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

2.4 子代选择器

选择器1 > 选择器2 > 选择器3 > …… 选择器n {}
选择器之间，用 > 隔开
选择器 1 2 3 4…n ，可以是上面学的任何一种选择器

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

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

2.5兄弟选择器

选中指定元素后符合条件的紧紧相邻（只向下看）兄弟元素
相邻兄弟选择器
选择器1+选择器2 {}

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

通用兄弟选择器
选中指定元素后符合条件的所有兄弟元素
选择器1~选择器2 {}

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

2.6属性选择器

选中属性值符合一定要求的元素
[属性名] 选中具有某个属性的元素
[属性名=”值”] 选中包含某个属性，且属性值等于指定值的元素
[属性名^=”值”] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名$=”值”] 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

[title="dd"] {
    color:red;
}

3 伪类和伪元素选择器

3.1 伪类选择器

3.1.1 动态伪类

:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态（鼠标按下不松开）
:focus 获取焦点的元素
:invalid 用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素
:valid 内容验证正确的

3.1.2 结构伪类

:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第 n 个
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第n个

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个
:nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个
:only-child 选择没有兄弟的元素（独生子女）
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）
n的情况：

  1. 0 或 不写 ：什么都选不中 —— 几乎不用
  2. n ：选中所有子元素 —— 几乎不用
  3. 1~正无穷的整数 ：选中对应序号的子元素
  4. 2n 或 even ：选中序号为偶数的子元素
  5. 2n+1 或 odd ：选中序号为奇数的子元素
  6. -n+3 ：选中的是前 3 个
    <style>
    /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） */
    div>p:first-child {
        color: red;
    }

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

    /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） */
    p:first-child {
        color: orange;
    }
</style>

3.1.3 否定伪类

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

/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
div>p:not(.fail) {
    color: red;
}

3.1.4 ui伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有 disabled 属性）

/* 选中的是勾选的复选框或单选按钮 */
input:checked {
    width: 100px;
    height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
    background-color: gray;
}

3.1.5 目标伪类

:target 选中锚点指向的元素
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
:target伪类用来改变页面中锚链接URL所指向的ID元素的样式。

3.1.6 语言伪类

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

3.2 伪元素选择器

选中元素中的一些特殊位置
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before {
 	content:"￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after {
	content:".00"
}

4 选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
具体计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)
a : ID 选择器的个数
b : 类、伪类、属性 选择器的个数
c : 元素、伪元素 选择器的个数
比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比

选择器 权重
ul>li (0,0,2)
div ul>li p a span (0,0,6)
#atguigu .slogan (1,1,0)
#atguigu .slogan a (1,1,1)
#atguigu .slogan a:hover (1,2,1)

行内样式权重大于所有选择器
!important 的权重，大于行内样式，大于所有选择器，权重最高

本文章主要借鉴于http://t.csdnimg.cn/3tur4 和 http://t.csdnimg.cn/ff1Ze

文章作者: wtt
文章链接: https://robotwizardt-github-io.pages.dev/2023/11/28/css-xuan-ze-qi-bi-ji/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 wtt !
css html
赏
  目录