css选择器总结（内附实例及截图）

目录

1. 通配符选择器

2. ID选择器

3. 类选择器

4. ID选择器跟类选择器的区别

5. 复合选择器
   5.1 标签指定式选择器（即…又…）
   5.2 后代选择器（包含选择器）（重点）
   5.3 并集选择器（常用）
   5.4 子代选择器
   5.5 交集选择器

6. 属性选择器

7. 通配符选择器

通配符选择器用“*”表示，它是所有选择器中作用最广的，能匹配页面中所有的元素，基本语法如下：

*{
	代码块
}

通配符选择器的穿透力很强，优先级高于继承的样式，会覆盖继承的样式，一般不用

2. ID选择器

HTML标签中ID的属性值在一个页面中必须是唯一的
在目标标签中设置一个ID属性值
在style标签中以

#属性值{
}

格式进行样式设置
效果：可以使同种标签进行不同的样式设置

ID选择器命名规范：
1）只可出现字母，下划线跟数字（且字母大小写严格区分）
2）只允许字母开头
3）不建议太长
4）不允许出现标签名

3. 类选择器

 .类名{

      }

引用方式：在标签中用class来引用

类可以有多个：两类用空格分开

<p class="wab demo">信息与通信工程学院</p>

4. ID选择器跟类选择器的区别

1，相同的class属性可以在HTML中出现多次。ID属性值在页面中只能出现一次
2，一个class的属性可以有多个值，也就是说一个标签可有多个类

建议尽量使用类选择器，使用ID时候情况，当确实能唯一确定当前页面中标签只出现一次，这时可以使用ID选择器。
如果不能保证相同作用的标签在页面中只出现一次，那么这时就选择使用类选择器。

5. 复合选择器

5.1 标签指定式选择器（即…又…）

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或ID选择器，两个选择器之间不能有空格，如：h3.special或p#one

5.2 后代选择器（包含选择器）（重点）

作用范围：所有后代
可层级多个，一般不要超过三重
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代

/* 首先先找到所有的 .box类对应的标签，然后找到该标签的所有li后代标签 */
 .box li{      
            属性
        }

  div li span{
            属性
        }
            
 #one li{
            属性
        }

5.3 并集选择器（常用）

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器，class选择器，ID选择器等），都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式

        h1{ color: red;}
        h2{ color: red;}
         p{ color: red;}

        h1, h2, p {   跟上面效果相同（逗号加空格）
            color: red;
        }

5.4 子代选择器

子代选择器，是让css智能选择儿子辈的元素
例如：
h1 > strong { Color: red; }
解读为：选择器h1>strong 可以解释为“选择作为h1元素子元素的多有strong元素”
尖括号和选择器之间可以有空格也可以没有，无限制
建议：选择器和尖括号间有空格

5.5 交集选择器

注意：中间没有连接符，但是如果有标签选择器，标签选择器一定要写在最前边

 交集选择器：
            语法：
            选择器1选择器2选择器3+..... {
                属性名：属性值;
            } */
            /* 既是p又有类one */
            p.one {
                color: pink;
            }

6. 属性选择器

通过标签内的属性来筛选需要控制的标签

一：是否有某属性

 h1[id] {
            color: red;
        }

二：是否有某属性，且该属性值为指定值

input[type="text"] {
            background-color:chartreuse;
        }

三：是否有指定多个某些属性

 h1[id][class] {
            font-size: 17px;
        }

补充：

E[attr]:只要这个元素存在attr这个属性

E[attr=“val”]:元素中attr的值必须是val

E[attr^=“val”]:attr属性值中是以val开头的

E[attr$=“val”]:attr属性值中是以val结尾的

E[attr*=“val”]:attr属性值中存在val属性的

    例子：

/* type^="val":表示type属性值以val开头 */
        li[type^="meat"]{
          
        }
        
         /* type$="val":表示type属性值是以val结尾的 */
        li[type$="hot"]{
            
        }
       
        /* type*="val":表示type属性值中只要有val这个值就行 */
        li[type*="very"]{
            
        }

以上。