CSS学习笔记2-CSS选择器

一时失言乱红尘 2024-04-17 05:23 12阅读 0赞

一、CSS选择器

1.什么是CSS选择器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70][]

2.CSS选择器的作用

根据指定标签，在当前页面中，找到所有符合条件的标签，设置样式

3.选择器需要的注意点

选择器选中的是所有该类型的标签，不是一部分，是所有。

无论标签藏得多深，选择器都可以找到该标签

二、常见的CSS选择器

1.标签选择器

作用：在整个页面中，选择包含该标签的所有元素，设置属性

需求：将页面中所有的p标签内容设置为红色

代码：

p{
                color: red;
            }

2. id选择器

作用：选择包含该id的元素，设置属性

注意点：

一个HTML页面id名称不能重复

id命名规则：

只能包含字母、数字、下划线；

不能以数字开头

不能与标签名相同

不能重复

需求：将id名称为account的元素字体设置为宋体

代码：

#account{
                font-family: "宋体";
            }

3.class选择器

作用：选择包含该class的元素，设置属性

注意点：

同一页面中，不同元素的class名称可以重复。一个标签可以有多个class名称，语法：<p class="名称1 名称2 名称3"></p>

class命名规则与id相同

需求：找到class名称为test的元素，将字号设置为30px

代码：

.test{
                font-size: 30px;
            }

4.后代选择器

作用：选择指定标签的所有特定后代元素，设置属性

需求：找到h1标签下所有的p元素，加上下划线

代码：

h1 p{
                text-decoration: underline;
            }

5.子元素选择器

作用：选择指定标签的特定子元素，设置属性

注意点：

子元素选择器只能选择指定标签的特定子元素。后代选择器可以选择指定标签的所有特定元素

需求：找到h1标签下的子元素p，设置为斜体

代码：

h1>p{
                font-style: italic;
            }

6.交集选择器

作用：选择多个选择器有交集的部分，设置属性。

需求：找到p标签中class为yellow的元素，将文本颜色设置为黄色

代码：

p.yellow{
                color: #FE0;
            }

7.并集选择器

作用：用于选择多个选择器并集的部分，设置属性

需求：找到p标签或class为yellow的元素，将文本颜色设置为黄色

代码：

p,.yellow{
                color: #FE0;
            }

8.相邻兄弟选择器

作用：用于找到与指定选择器相邻且同级的特定元素，设置属性

注意点：

两个选择器元素必须在同一级

两个选择器元素必须相邻

需求：找到与h1标签同级且相邻的p标签，将颜色设置为蓝色

代码：

h1+p{
                color: blue;
            }

9.通用兄弟选择器

作用：用于找到与指定选择器同级的特定元素，设置属性

注意点：

两个选择器元素必须在同一级

两个选择器元素可以不相邻

需求：找到与h1标签同级的p标签，将颜色设置为蓝色

代码：

h1~p{
                color: blue;
            }

10.序选择器

作用：选择指定的任意标签，设置属性

常见类型：

1）同级别：

标签名:first-child 选择同级别的第一个标签

标签名:last-child 选择同级别的最后一个标签

标签名:nth-child(n) 选择同级别中的第n个标签

标签名:nth-last-child(n) 选择同级别中倒数第n个标签

标签名:only-child 选择同级别父元素中唯一标签

2）同类型：

标签名:first-of-type 选择同类型的第一个标签

标签名:last-of-type选择同类型的最后一个标签

标签名:nth-of-type(n) 选择同类型中的第n个标签

标签名:nth-last-of-type(n) 选择同类型中倒数第n个标签

标签名:only-of-type 选择同类型父元素中唯一标签

标签名:nth-child(odd)选择同级别中的奇数标签，设置属性

标签名:nth-of-type(even)选择同类型中的偶数标签，设置属性

需求：将同级p标签中3的倍数的标签字体英文设置为Ebrima。中文设置为仿宋

代码：

p:nth-of-type(3n+0){
                font-family: Ebrima,"仿宋";
            }

11.属性选择器

作用：选择包含特定属性名称的元素，设置属性

常见类型：

\[属性名称\]：选择包含某个属性的元素

\[属性名称="123"\]：选择包含某个属性且属性值为123的元素

\[属性名称^="123"\]：选择包含某个属性且属性值为123开头的元素

\[属性名称$="123"\]：选择包含某个属性且属性值为123结尾的元素

\[属性名称\*="123"\]：选择包含某个属性且属性值包含123的元素

需求：找到class值包含test的元素，将颜色设置为红色

代码

[class*="test"]{
                color:#FF0000;
            }

12.通配符选择器

作用：用于给当前页面所有元素设置属性。企业中一般不会使用，使用该选择器，页面元素过多时，会导致性能下降。

需求：将当前页面所有元素字体设置为仿宋

代码：

*{
                font-family: "仿宋";
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/2e7aecb80db0487b9af2913910d26721.png

CSS学习笔记2-CSS选择器

发表评论取消回复

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

相关阅读

相关 CSS学习笔记2-CSS选择器

相关 CSS基础——CSS复合选择器【学习笔记】

相关 CSS基础——选择器【学习笔记】

相关 HTML5——CSS学习笔记（14）css3选择器

相关 css选择器_CSS选择器

相关 CSS 学习笔记 - 选择器

相关 CSS学习笔记--CSS语法与选择器

相关 css学习笔记-----选择器

相关前端基础学习笔记 CSS选择器

相关前端学习笔记(CSS)——选择器