01、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 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。