CSS学习笔记2-CSS选择器

一、CSS选择器

1.什么是CSS选择器

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: "仿宋";
        }