css的选择器细讲

前言：

选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说就是选择标签用的

选择器分为基础选择器和复合选择器

---

目录

一，基础选择器

1.标签选择器

 2.类选择器（常用）

3.类选择器 ——多类名

4.id选择器

5.通配符选择器

 6.属性选择器

 7.基础选择器的总结

 二，复合选择器

1.后代选择器

2.子元素选择器

3.并集选择器

4.伪类选择器

5.复合选择器总结

---

一，基础选择器

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器，类选择器，id选择器，通配符选择器和属性选择器

1.标签选择器

标签选择器是指用HTML标签的名称作为选择器，按标签名称分类，为了当前页面中某一类标签同一css样式

语法：

标签名：{

                 属性1：属性值；

                  属性2：属性值；

                    .......

}

效果展示：（注：css中color属性为文本颜色）

                                           

---

 2.类选择器（常用）

如果想要差异化选择不同的标签，单独选择一个几个标签，可以使用类选择器

语法：

   . 类名

                 属性1：属性值；

                  属性2：属性值；

 }

引用类选择器要用class属性来调用

例如：

  


  
class引用

               

效果展示：

 类选择器口诀：样式点定义，结构class调用，一个或多个，开发开发最常用。

*注意点：

1. 类选择器使用“.”(英文符号点)进行标识，后面紧跟类名（自定义，我们自己命名）不能用标签
2. 长名字或词组可以用中横线来表示 例如： shang-hai
3. 不能用纯数字，中文等命名，尽量使用英文字母表示
4. 命名尽量要有意义，做到一眼知意

---

3.类选择器 ——多类名

我们可以给一个标签指定多个类名，从而达到更多选择的目的，这些类名都可以选出这个标签

语法：例如

 注意点：

1. 在标签中class属性写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签具有所有类名的特点

---

4.id选择器

id选择器可以规定含有id属性HTML元素的样式，HTML中以id属性来设置id选择器，css中以“#”定义

语法：

#id名 {

                  属性1：属性值；

                  属性2：属性值；

                    .......

}

效果展示：

id选择器口诀：样式#定义，结构id调用。只能用一，其他切勿用。 

 注意：

• id选择器每个HTML文件只能使用一次
• id选择器之只能调用一次

---

5.通配符选择器

css中通配符选择器使用“ * ”定义，他表示页面中所有的元素

语法：

  * { 

       属性1：属性值；

                  属性2：属性值；

                    .......

}

效果展示：

 注意点：

• 通配符选择器不需要调用，自动给所有元素使用样式
• 特殊情况下才用，后面讲场景时常用（以下是清除所有元素的内外边距 后期将）

 6.属性选择器

css中还可以通过HTML中的属性的不同来添加样式，在css中用  [ ]  英文的中括号定义属性选择器

语法：

[属性] {

       属性1：属性值；

                  属性2：属性值；

                    .......

}

或

[属性="属性值"] {

       属性1：属性值；

                  属性2：属性值；

                    .......

}

效果展示：

---

 7.基础选择器的总结

基础选择器	作用	特点	情况	语法
标签选择器	可以选出所有相同的标签	不能差异选择	较多	p {   }
类选择器	可以选出你想选出的标签	可根据需求选择	非常多	.nav {  }
id选择器	一次只能选择一个标签	HTML中只能出现一次	js常用	#nav {  }
通配符选择器	选择所有标签	不需要调用，整个网页起作用	特殊情况用	* {  }
属性选择器	选出含有该属性的元素	可以根据不同的属性或属性值选出想要的元素	较多	[name] {  }

•  每个选择器都有使用场景都与要掌握
• 如果是写改样式类选择器使用最多

---

 二，复合选择器

复合选择器是建立在基础选择器上，对基本选择器进行组合形成的

• 复合选择器可以更精准，更高效的选择标签
• 复合选择器由两个或多个基础选择器通过不同的方式组合形成的
• 常用的复合选择器：后代选择器  子代选择器  并集选择器  伪类选择器

1.后代选择器

后代选择器又被称为包含选择器，可以选择父元素中的子元素

其写法就是把外层标签写在前面内层标签写在后面，当发生嵌套时，内层标签就成为了外层标签的后代（子元素 父元素定义）

语法：

元素1 元素2 ..... 元素n {                        

                  属性1：属性值  ;              

                  属性2：属性值；               

                    .......                                  

}

案例：

仅使乔治 佩奇变色

 上述语法表示 ：div 包含了 p 

 注意：

• 元素之间必须用空格分开
• 前面的标签是后面元素的父元素，最终选中的是最后面的元素
• 后面的元素可以做父级也可是子级 如：div ol li a ；ol是div的子级但是li的父级
• 其中的子父级可以是任意选择器 如：.nav #mang [name] a 
• 书写顺序一定是由外到内

---

2.子元素选择器

子元素选择器只能选择作为某一元素最近一级子元素 简单来说就是选择亲儿子

如上div 最近的一级子元素就是h1  ol  即亲儿子就是h1 ol 而 li 是div 的孙级

语法：

元素1>元素2 >...>元素n {                        

                  属性1：属性值  ;              

                  属性2：属性值；               

                    .......                                  

}

案例：

只让光头强变色

 上述语法表示：div 中所有的直接后代（最近一级子元素）p

注意：

• 元素与元素之间用大于符号隔开
• 前面的标签是后面元素的父元素，最终选中的是最后面的元素
• 最终选择的元素必须是上一级元素的亲儿子

---

3.并集选择器

并集选择器可以同时选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过英文的逗号（,）连接而成，任何选择器都能成为并集选择器的一部分。     例如：.anv ol li ,#cin>a, p

语法： 

元素1，元素2 ，...，元素n {                        

                  属性1：属性值  ;              

                  属性2：属性值；               

                    .......                                  

}

案例：

 

 注意：

• 元素与元素之间用逗号隔开
• 逗号理解为“和”的意思
• 并集选择器通常用于集体声明

---

4.伪类选择器

伪类选择器用于向某些选择器添加特殊效果

伪类选择器最大的特点是用英文的冒号（:）表示 

伪类选择器器常用的选择器

选择器	说明
：link	选中未被访问过的元素
：visited	选中被访问过的元素
：hover	选中鼠标指针于元素上的元素
：active	选中鼠标按下未弹起的元素
：focus	用于获得焦点的元素 被点击的元素

 *注：为确保生效必须按照 link visited hover active 的顺序书写

语法：

选择器 伪类选择器 {             

                  属性1：属性值  ;              

                  属性2：属性值；               

                    .......                                  

}

5.复合选择器总结

选择器	作用	特征	使用情况	分隔符及用法
后代选择器	用来选择后代元素	所有后代	较多	空格  .nav a
子代选择器	选择最近一级	选择亲儿子	较少	>    .nav>a
并集选择器	设置相同的样式	用于集体声明	较多	;      .nav;a
伪类选择器	设置特殊效果		较多	:     a:link   input:focus

---

谢谢观看！！！！