CSS选择器--小结

太过爱你忘了你带给我的痛 2024-03-27 14:53 71阅读 0赞

## 一、基本选择器 ##

### 1.选择器分类： ###

#### 1）.行内选择器 ####

使用格式：<p style="..."></p>

#### 2）.id选择器 ####

书写格式：\#id01 \{\} ，使用格式：<p id="id01"></p>

#### 3）.类class选择器 ####

书写格式：.c01\{\}，使用格式：<p class="c01"></p>

#### 4）.标签tagname 选择器 ####

书写格式：p \{\}

#### 5）.通配符\*选择器 ####

书写格式：\*\{\}

### 2.选择器优先级 ###

行内选择器 > id选择器 > class选择器 > tagname选择器 > \*通配符选择器

注意：使用!important时，优先级将提升最高。

## 二、层次选择器 ##

1. > 选择子代

2. 空格 选择后代

3. ~ ul a~li \{\} 在ul中选择所有a标签下面的所有li标签

4. + ul a+li \{\} 在ul中选择所有a标签中的下一个li标签

例：标签1 标签2：first-child\{\}

5. :first-child，仅选择第一个子标签，只有与标签2同类型才被选择

6. :last-child，仅选择最后一个子标签，只有与标签2同类型才被选择

## 三、结构选择器 ##

例：标签1 标签2:first-of-type

1. :first-of-type 在所有标签1中选择与标签2同类型的,从标签2类型起第一个子标签

2. :last-of-type 在所有标签1中选择与标签2同类型的,从标签2类型起最后一个子标签

例：标签1 标签2:nth-of-type(3) \{\}

3. :nth-of-type(3) \{\} 在所有的标签1中选择与标签2同类型的，从标签2类型起第3个子标签不选

例：标签1 标签2:not(:nth-of-type(3)) \{\}

4. :not(:nth-of-type(3)) \{\} 在所有的标签1中选择与标签2同类型的，从标签2类型起第3个子标签

例：标签1 标签2:nth-of-child(4) \{\}

5.:nth-child(4) \{\} 在所有的标签1中选择与标签2同类型的，从头起第四个子标签

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关复合选择器优先级小结

一、释义顾名思义就是多个选择器杂糅一起。二、优先级可以用一个矩阵理解，从左到有分别是： id class tagname \ 1 0 0 0 0 1

Bertha 。/ 2024年03月27日 15:49/ 0 赞/ 66 阅读

相关 CSS选择器--小结

一、基本选择器 1.选择器分类： 1）.行内选择器使用格式：<p style="..."></p> 2）.id选择器书写格式：\id01 \{\}

太过爱你忘了你带给我的痛/ 2024年03月27日 14:53/ 0 赞/ 72 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 352 阅读

相关 css通用选择器用_通用选择器（CSS选择器）

css通用选择器用描述 (Description) The universal selector matches any element type. It can b

朱雀/ 2022年12月03日 11:26/ 0 赞/ 322 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 354 阅读

相关 CSS3选择器使用小结

CSS3 选择器小结一通用选择器 1 \\{\}通配选择符(CSS2)：适合所有元素对象。 2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为

男娘i/ 2021年12月23日 07:53/ 0 赞/ 284 阅读

相关 css选择器

跳转到幕布查看： [https://mubu.com/doc/6pqBOHEMKM][https_mubu.com_doc_6pqBOHEMKM] [https_mub

小鱼儿/ 2021年11月13日 23:02/ 0 赞/ 478 阅读

相关 CSS--选择器

前言内容标记选择器类别选择器 ID选择器集体声明总结 end 前言

痛定思痛。/ 2021年09月27日 05:30/ 0 赞/ 486 阅读

相关 CSS 选择器

CSS选择器包括元素选择器、id选择器、class选择器、属性选择器 1.元素选择器用标签名作为选择器，选中所有相应的元素。 <!DOCTYPE HTM

逃离我推掉我的手/ 2021年09月14日 02:04/ 0 赞/ 533 阅读

相关 css 选择器

Css中的选择器：

忘是亡心i/ 2021年06月24日 13:59/ 0 赞/ 651 阅读