文章目录

前言
一、CSS基础知识
二、选择器
- 1.选择器
- 2.基础选择器
- - 2.1 标签选择器
  - 2.2 类选择器
  - 2.3 id选择器
  - 2.4 通配符选择器
  - 2.5 基础选择器总结
- 3.复合选择器
- - 3.1 后代选择器
  - 3.2 子元素选择器
  - 3.3 并集选择器
  - 3.4 相邻兄弟选择器
  - 3.5 复合选择器总结
- 4.伪类选择器
- - 4.1 动态伪类选择器
  - 4.2 UI元素状态伪类选择器
  - 4.3 结构伪类选择器
  - 4.4 否定伪类选择器
- 5.伪元素选择器
- - 5.1 :before选择器
  - 5.2 :after选择器
  - 5.3 :first-line选择器
  - 5.3 :first-letter 选择器
- 6.属性选择器
三、伪元素和伪类

前言

提示：以下是学习前端以来，整理过的一些CSS选择器知识点。知识主要来源于黑马程序员Pink老师，内容都是自己的理解，如果有不对的地方，请评论区指正，谢谢~~

一、CSS基础知识

CSS 规则由两个主要的部分构成：选择器 + 一条或多条声明

 <head> <style> h4 { color: blue; font-size: 100px; } </style> </head>

选择器：需要修改 CSS 样式的 HTML 标签
声明：采用键值对方式写在花括号内

属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;” 进行区分

二、选择器

1.选择器

选择器：基础选择器、复合选择器
基础选择器（单个选择器组成）：标签选择器、类选择器、id 选择器和通配符选择器
复合选择器：后代选择器、子选择器、并集选择器、相邻兄弟选择器、伪类选择器

2.基础选择器

2.1 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，使用标签选择器，可以为页面中某一类标签指定统一的 CSS 样式。

 <head> <style> p { color: blue; font-size: 100px; } </style> </head>

为页面中的所有p标签，设置color和font-size样式

优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。

2.2 类选择器

类选择器：单独选一个或者某几个标签——使用 .

 <head> <style> .one { color: blue; font-size: 100px; } </style> </head><body><div class="one"></div></body>

div标签设置了class属性，属性值为one，我们通过".one"的形式修改标签样式

① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
② 可以理解为给这个标签起了一个名字，来表示。
③ 长名称或词组可以使用中横线来为选择器命名。
④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。
⑥ 命名规范：见附件（ Web 前端开发规范手册.doc）
记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

多类名使用：一个html标签的class值可以有多个

<div class="red font20">亚瑟</div>

(1) 在标签class属性中写多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
多类名开发中使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.

2.3 id选择器

id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。——使用#

 <head> <style> #one { color: blue; font-size: 100px; } </style> </head><body><div id="one"></div></body>

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

id 选择器和类选择器的区别
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

2.4 通配符选择器

通配符选择器：选取页面中所有元素（标签）。——使用*

 <head> <style> * {     margin: 0;   padding: 0; }</style> </head>

通配符选择器不需要调用，自动就给所有的元素使用样式

2.5 基础选择器总结

基础选择器	作用	特点	用法
标签选择器	设置所有相同的标签的属性	不能差异化选择	p{color: red;}
类选择器	设置一个或多个标签	可以根据需求选择	.nav{color: red;}
id选择器	一次只能设置一个	id属性只能在每个html文档中出现一次	#nav{color :red;}
通配符选择器	设置所有标签	选择的太多，有部分不需要	*{color:red;}

3.复合选择器

3.1 后代选择器

后代选择器（包含选择器），可以选择父元素里面子元素。
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。

 <head> <style> ul li { color: blue; font-size: 100px; } </style> </head>

li 是 ul 的后代元素

元素1 元素2 { 样式声明
}
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和 元素2 可以是任意基础选择器

3.2 子元素选择器

子元素选择器（子选择器）：只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

元素1 > 元素2 { 样式声明
}
div > p { 样式声明
}  /*  选择 div 里面所有最近一级 p 标签元素  */
元素1 和 元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

3.3 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2 {样式声明
}
ul,div { 样式声明
}  /*  选择 ul 和  div标签元素  */
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

3.4 相邻兄弟选择器

相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素。——使用+

h + p { 样式声明
}  /*  选择h元素后的所有p元素  */
h元素与p元素是兄弟，两者有共同的父亲

3.5 复合选择器总结

选择器	作用	特征	用法
后代选择器	用来选择后代元素	可以是子孙后代	符号是空格
子代选择器	选择最近的一级元素	只能是亲儿子	符号是大于
并集选择器	选择某些同样式的元素	可以用于集体声明	符号是逗号
相邻兄弟选择器	选择某些同样式的元素	可以用于集体声明	符号是加号

4.伪类选择器

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

4.1 动态伪类选择器

E:link：选择 未被访问 的超链接（超链接点击之前）
E:visited：选择 已被访问 的超链接（链接被访问过之后）
E:active：选择 已被激活 的超链接（鼠标按住不放，即鼠标点击标签，但是不松手时）
E:hover ：选择 鼠标悬浮 的超链接（鼠标悬浮在超链接上）
为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active
记忆法：love hate 或者 lv 包包 hao 。

链接添加特殊效果：hover、：active、：active、：link<head> <style> a：hover { color: blue; font-size: 100px; } </style> </head>

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

E:focus：选择获取焦点的元素

获取具有焦点的表单元素input:focus {  background-color:yellow; }

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 input 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

4.2 UI元素状态伪类选择器

E:checked（选中状态伪类选择器）：匹配被选中的单选按钮或复选按钮
E:enabled（启用状态伪类选择器）：匹配所有启用的表单元素
E:disabled（不可用状态伪类选择器）：匹配所有禁用的表单元素
UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作

获取被选中的单选按钮
input[type="radio"]:checked {  background-color:yellow;
}

注意：IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

4.3 结构伪类选择器

具体代码例子：https://www.cnblogs.com/guangzan/p/10306167.html

E:fisrt-child ：元素E是父元素的第一个子元素，等价于E:nth-child(1)
E:last-child ：元素E是父元素的最后一个子元素，等价于E:nth-last-child(1)

E:root：元素E所在文档的根元素，等价于html标签选择器（在html文档中）

注意：选择器中的****n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0。

E F:nth-child(n)：父元素E的第n个子元素F。
E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child
它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.4 否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

input:not([type="submit"]) {border: 1pxsolidred;
}//对form中所有input加边框，但又不想submit也起变化

参考文章：https://zhuanlan.zhihu.com/p/142522917

5.伪元素选择器

5.1 :before选择器

:before伪元素选择器：用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
例子传送门：https://blog.csdn.net/qq_40660787/article/details/80256202

5.2 :after选择器

:after伪元素选择器：用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
例子传送门：https://blog.csdn.net/qq_40660787/article/details/80256202

5.3 :first-line选择器

::first-line 伪元素用于向文本的首行添加特殊样式。
例子传送门：https://www.w3school.com.cn/css/css_pseudo_elements.asp

5.3 :first-letter 选择器

::first-letter 伪元素用于向文本的首字母添加特殊样式。
例子传送门：https://www.w3school.com.cn/css/css_pseudo_elements.asp

在最新的CSS3标准中，把伪对象的格式改成了双冒号，即::before，::after，这是为了和伪类分开。早期的浏览器，比如IE8，只支持单冒号的伪对象。如果为了往下兼容，可以使用单冒号伪对象，如果只兼容IE9以上的现代浏览器，可以使用双冒号伪对象。

6.属性选择器

属性选择器例子：https://www.w3school.com.cn/css/css_selector_attribute.asp

属性选择器	用法
input[type]	选择具有type属性的input元素，例如< input type=“text”>
input[type][name]	选择具有type和name属性的input元素，例如< input type=“text” name=“a”>
input[type = “radio”]	选择type属性值为radio的input元素，例如< input type=“radio”>
input[class ~= “rad”]	选择class属性值包含rad的input元素（rad必须是一个单词），
	例如< input class=“aa raddd”>匹配失败，< input class=“aa rad dd”>匹配成功
input[class I= “radio”]	选择class属性值以radio-开头的input元素或属性值为radio，
	例如< input class=“radio-sf”>< input class=“radio”>，而 < input class=“radio sf”>匹配失败
input[class ^= “radio”]	选择class属性值以radio开头的input元素，
	例如 < input class=“radiosf”> ,而< input class=“ra diosf”>匹配失败
input[class $= “radio”]	选择class属性值以radio结尾的input元素，例如< input class=“raadd adradio”>
*input[class = “radio”**]	选择class属性值包含radio的input元素，例如< input class=“raddradioadd”>

表格中的使用input作为例子，标签可以为任意标签，[]内可以为任意属性

[abc^=“def”] 、[abc$=“def”] 、[abc*=“def”]这三个选择器是CSS3新增选择器，又名为子串匹配属性选择器，匹配属性值是是否以字符串开头结尾或者包含字符串，即[abc*=“def”]可以匹配"defaaa"，然而[abc~=“def”]匹配的属性值要包含def单词，即"ad def hag"才能匹配成功，"defaaa"匹配失败

PS：伪类选择器、伪元素选择器、属性选择器属于复合选择器吗？

三、伪元素和伪类

伪类和伪元素是用来修饰不在文档树中的部分

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

CSS基础知识（一）：选择器相关推荐

CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
HTML+CSS基础知识5
HTML+CSS基础知识5 30.`<strong>`.`<em>`和`<b>`.`<i>`标签的区别 31.引用标签 32.iframe嵌套页面 33 ...
HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
CSS基础知识（定位）
CSS基础知识 CSS布局的三种机制普通流(标准流) 浮动定位定位模式静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移定位 ...
前端开发入门：html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

CSS基础知识（一）：选择器