系列文章目录
文章目录
一、CSS简介
CSS的中文名叫做层叠样式表,用来改变HTML标签的样式,让其更加美观。
它的基础格式如下:
选择器 {
属性: 值;
属性1: 值1;
……
}
二、CSS注释
/* 单行注释 */
/*
多行注释
多行注释
*/
三、CSS的三种引入方式
1. 行内方式
直接在html标签内部书写(格式比较特殊),耦合度高,尽量不要用:
<h1 style="属性: 值;属性1:值1">内容</h1>
2. 内部方式
在style标签内书写:
<head>
<style>
选择器 {
属性: 值;
……
}
……
</style>
</head>
注意:style标签要写在head标签内!
3. 外部方式(推荐)
首先新建一个扩展名为css的文件,将css代码写入该文件内。
然后使用link标签,将css文件引入html文件中:
<head>
<link rel="stylesheet" href="css文件的路径">
</head>
四、选择器
CSS的选择器,用来指定样式要被应用到哪个标签上。
1. 基本选择器
简单直接,通过id、class等直接筛选出标签。
-
id选择器:
#对应标签的id属性值 {……}
-
类选择器:
.对应标签的class属性值 {……}
注意开头的英文句点!
-
标签(元素)选择器:
标签名称 {……}
-
通用选择器:
通用选择器会修改所有标签的样式。
* {……}
2. 组合选择器
根据标签之间的特定关系来筛选出标签。
-
后代选择器:
后代是指标签的嵌套关系中,某个标签内部的所有标签,都属于该标签的后代标签。
后代选择器会从某标签的所有后代中筛选标签。
选择器 选择器 {……}
比如,筛选出ad类标签下的所有p标签:
.ad p {……}
-
子选择器:
在XXX标签的嵌套关系中,处于XXX标签内第一层的所有标签,就是XXX的子标签,更深层次的标签就不属于子标签。后代标签包含子标签,子标签是后代标签的一部分。
子选择器会从某标签的所有子标签中筛选标签。
选择器>选择器 {……}
-
相邻弟弟选择器:
属于同一层(没有嵌套关系)且紧挨着的下一个标签,就是相邻弟弟标签。比如,下面p标签中的h1标签下面的span标签,就是相邻弟弟标签:
<p> <h1>我是哥哥</h1> <span>我是弟弟</span> <div>我是弟弟的弟弟</div> </p> <div> <h1>上面的哥哥弟弟跟我没关系</h1> </div>
相邻兄弟选择器会筛选出相邻的弟弟标签。
选择器+选择器 {……}
-
普通弟弟选择器:
上面的选择器筛选出的是紧挨着的下一个标签,而普通弟弟选择器则没有紧挨着的限制。
普通弟弟选择器会从所有弟弟标签中筛选标签。
选择器~选择器 {……}
3. 属性选择器
根据html标签的属性、属性值等筛选出标签。
-
属性选择器:
筛选出含有A属性的所有标签。
[A属性] {……}
-
属性和值选择器:
筛选出某个属性等于某个值的所有元素。
[属性=值] {……}
4. 选择器分组
先看一组很烂的代码:
h1 {
color: red;
}
#dd {
color: red;
}
[class="xyz"] {
color: red;
}
上面的css代码,三个代码块,虽然选择器不一样,但样式一样,代码冗余很高。因此,我们可以用选择器分组,来简化书写:
h1,#dd,[calss="xyz"] {
color: red;
}
选择器分组是一种对CSS代码的简化方法,它的语法如下(注意是用英文逗号隔开选择器):
选择器,选择器…… {……}
5. 伪类选择器
-
伪类的作用:
- 能够使同一个标签,根据标签的不同状态,展现不同的样式。
- 给选择器添加一些特殊效果,比如
:not(p)
会选择除了p标签以外的所有标签。 - 伪类选择器和下面的伪元素选择器,都是为了满足一些五花八门的特殊需求而产生的。
-
语法:
选择器:伪类(参数) {……} /* “(参数)” 有的伪类需要,有的不需要 */
或者:
:伪类(选择器) {……}
-
伪类:
选择器 例子 例子描述 :active a:active 选择活动的链接。即鼠标左键按下时,松开后失效。 :checked input:checked 选择每个被选中的 元素。 :disabled input:disabled 选择每个被禁用的 元素。 :empty p:empty 选择没有子元素的每个 元素。
:enabled input:enabled 选择每个已启用的 元素。 :first-child p:first-child 选择作为其父的首个子元素的每个 元素。
:first-of-type p:first-of-type 选择作为其父的首个 元素的每个
元素。
:focus input:focus 选择获得焦点的 元素。 :hover a:hover 选择鼠标悬停其上的链接。 :in-range input:in-range 选择具有指定范围内的值的 元素。 :invalid input:invalid 选择所有具有无效值的 元素。 :lang(language) p:lang(it) 选择每个 lang 属性值以 “it” 开头的 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 元素的每个
元素。
:link a:link 选择所有未被访问的链接。 :not(selector) :not§ 选择每个非 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个 元素,从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个 元素的每个
元素,从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 元素的每个
元素。
:only-of-type p:only-of-type 选择作为其父的唯一 元素的每个
元素。
:only-child p:only-child 选择作为其父的唯一子元素的 元素。
:optional input:optional 选择不带 “required” 属性的 元素。 :out-of-range input:out-of-range 选择值在指定范围之外的 元素。 :read-only input:read-only 选择指定了 “readonly” 属性的 元素。 :read-write input:read-write 选择不带 “readonly” 属性的 元素。 :required input:required 选择指定了 “required” 属性的 元素。 :root root 选择元素的根元素。 :target #news:target 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 :valid input:valid 选择所有具有有效值的 元素。 :visited a:visited 选择所有已访问的链接。 该表引用自w3cschool。
常用的有
focus
、hover
、activate
、等 -
举例:
根据a标签的不同的状态,显示不同的颜色。
/* link代表未访问时 */ a:link { color: #FF0000; } /* visited代表访问之后 */ a:visited { color: #00FF00; } /* hover代表鼠标悬停时 */ a:hover { color: #FF00FF; } /* active代表鼠标左键按下时(松开左键失效) */ a:active { color: #0000FF; }
6. 伪元素选择器
伪元素选择器和上面的伪类选择器有点相似,也是用来满足一些特殊需求的。但后者修改的是真正的元素(标签),而前者则是操作元素的一部分或创建一个虚假的元素。比如,修改元素内容的首字母样式。
-
伪元素:
选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。
::before p::before 在每个 元素之前插入内容。
::first-letter p::first-letter 选择每个 元素的首字母。
::first-line p::first-line 选择每个 元素的首行。
::selection p::selection 选择用户选择的元素部分。 该表引用自w3cschool。
-
语法:
选择器::伪元素 {……}
-
举例:
p::before { content: "要插入的内容" }
注意:使用CSS插入的内容,不能被鼠标选中。
五、选择器优先级
在属性后面使用!important
会覆盖页面内任何位置定义的元素样式。比如:{color: red !important}
。慎用!
-
引入方式:
就近原则:谁离元素近就应用谁,行内方式 > 内部方式 > 外部方式。
-
不同选择器:
选择器的精确度越高(筛选出的元素越少)优先级越高。
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 浏览器默认属性。