选择器

目录：

1.通用选择器 2.标签选择器 3.类选择器 4.id选择器

5.复合选择器 6.群组选择器 7.后代选择器 8.直接后代选择器

9.属性选择器 10.伪类和伪元素 11.兄弟选择器 12.否定伪类

 

本篇笔记记录各种选择器使用效果，是学习叶建华老师的网课时做的。

传送门：https://study.163.com/course/courseLearn.htm?courseId=1006399046#/learn/video?lessonId=1053981863&courseId=1006399046

 

1. 通用选择器

在*{}里设置样式，样式作用于全部元素

 

2.标签选择器

样式单独作用于相应标签

 

3.类选择器

类选择器以一个 . 号显示。一个标签可以有几个类名。

 

4. id 选择器

可以把 id 类比为身份证，id 是独一无二的。id 只能用在一个标签上，如果用到一个以上的标签上会报错。

类选择器以一个 # 号显示。

 

5.复合选择器

同时使用多个选择器，这样可以选择时满足多个选择的元素。

例如，将样式作用于类为 test1 的 div 标签

 

6.群组选择器

可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

例如，div,.test1,#box会同时选中页面中div元素，class为test1元素，id为box元素

 

7.后代选择器

后代元素可以根据标签的关系，为处在元素内部的后代元素设置样式

例如,div p {}会选中页面中所有 div 元素的 p 标签

例如，#main p { } 会选中 id 为 main 的元素的后代元素的 p 标签

 

8.直接后代选择器

写法：父元素>子元素 {}

 

9.属性选择器

属性选择器可以选带有特殊属性的标签

语法：

　　[属性名]

　　[属性名="属性值"]

　　[属性名~="属性值"]

　　[属性名|="属性值"]

　　[属性名^="属性值"]

　　[属性名$="属性值"]

　　[属性名*="属性值"]

例如，div[name]{}选中包含 name 属性名的 div 元素

例如，div[name="test2"]{}选中包含 name="test1" 的 div 元素

例如，div[name][age]{}选中同时包含 name 跟 age 的 div 元素

 

10.伪类和伪元素

使用场景：

　　有时候，需要选择的本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标进入等等。

针对 a 标签：

　　正常链接：a:link

　　访问过的链接：a:visited（只能定义字体颜色）

　　鼠标滑过的链接：a:hover

　　正在点击的链接：a:active

针对其它标签：

　　获取焦点：:focus

　　指定元素前：:before

　　指定元素后：:after

　　选中的元素：::selection

　　首字母：:first-letter

　　首行：:first-line

　　选择第一个子标签：:first-child

　　选择最后一个子标签：:last-child

　　选择指定位置的子元素：:nth-child

伪类和伪元素的区别：

　　参考网络上的资料：https://www.cnblogs.com/xmbg/p/11608268.html

例如，p::first-letter{} 是选中所有 p 元素的第一个单词

例如，p::first-letter{} 是选中所有 p 元素的第一行

例如，p.test1:hover{} 选中 class 为 test1 的 p 元素，当鼠标移到该元素上时背景颜色变蓝

例如，input:hover{} 选中 input 元素，当元素获得焦点时宽高改变

 

 

 

11.兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素

写法：

　　①查找后边一个兄弟元素：兄弟元素 + 兄弟元素{}

　　②查找后边所有的兄弟元素：兄弟元素 ~ 兄弟元素{}

例如，div + p {} 选中 div 后边一个 p 元素

例如，div ~ p {} 选中 div 后边所有的 p 元素

 

12.否定伪类

否定伪类可以帮助我们选择不是其他标签的某个标签

语法：

　　:not(选择器){}

例如，div:not(.box) 表示选择除 class 为 box 外的所有的 div 元素