CSS基础知识 - 选择器 | 弟弟快看-教程

前言

提示：以下是学习前端以来，整理过的一些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 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

01、CSS基础知识 - 选择器

前言