WEB前端-CSS基础知识复习（四）

本文最后更新于：December 3, 2021 pm

CSS 指层叠样式表（Cascading Style Sheets）。通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！
外部样式表通常存储在 CSS 文件中，外部样式表可以极大提高工作效率。

目录

1.组合选择符

CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。组合选择符说明了两个选择器直接的关系。组合选择符包括各种简单选择符的组合方式。

包含四种组合方式：

  1. 后代选取器(以空格分隔)
  2. 子元素选择器(以大于号分隔）
  3. 相邻兄弟选择器（以加号分隔）
  4. 普通兄弟选择器（以波浪号分隔）

1.1 后代选取器（ ）

后代选取器匹配所有指定元素的后代元素。

使用实例：选取所有插入到 div 元素中的 p 元素

1
2
3
div p{
background-color:yellow;
}

1.2 子元素选择器（>）

子元素选择器（Child selectors）只能选择作为某元素子元素（直接子元素）的元素。即父元素中的直接子元素（如：div中的直接子元素 p），不能是间接子元素（如：div 中有 span ，span 中有p）。

使用实例：选择了div元素中所有直接子元素 p ：

1
2
3
div>p{
background-color:yellow;
}

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS</title> 
<style>
div>p{
	background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<div>
<h2>我叫唐纳德</h2>
<p>我住在达克堡。</p> <!--只有这个才有效果-->
</div>
<div>
<span><p>我是间接子元素。</p></span> 
</div>
<p>我最好的朋友是米奇。</p>
</body>
</html>

1.3 相邻兄弟选择器（+）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。即在一个元素结束后的下一个元素。

使用实例：选取所有位于 div 元素后的第一个 p 元素：

1
2
3
div+p{
background-color:yellow;
}

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS</title> 
<style>
div+p{
	background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<div>
<h2>我叫唐纳德</h2>
<p>我住在达克堡。</p>
</div>
<p>我是被修改的。</p> <!--只有这个才有效果-->
<p>我不是被设计的。</p>
</body>
</html>

1.4 普通相邻兄弟选择器（~）

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

使用实例：选取所有 div 元素之后的所有相邻兄弟元素 p : 

1
2
3
div~p{
background-color:yellow;
}

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
div~p{
	background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p> <!--这个有效果-->
<p>段落 4。不在 div 中。</p> <!--这个有效果-->
</body>
</html>

2.伪类

伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪类/元素：

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

2.1 语法

伪类语法：

1
selector:pseudo-class {property:value;}

CSS类使用伪类：

1
selector.class:pseudo-class {property:value;}

2.2 anchor伪类

链接的不同状态都可以以不同的方式显示。

使用实例：

1
2
3
4
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

在 CSS 定义中：
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。

2.3 伪类和CSS类

伪类可以与 CSS 类配合使用：

1
2
3
/* 如果链接已被访问，会显示为红色。*/
a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

2.4 :first - child 伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

使用实例1：匹配作为任何元素的第一个子元素的 p 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style>
p:first-child{
color:blue;
}
</style>
</head>
<body>
<p>我是一个男人。</p>
<p>我是一个女人。</p>
</body>
</html>

使用实例2：选择相匹配的所有 p 元素的第一个 i 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style>
p > i:first-child{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>男人</i> man. 我是一个 <i>男人</i> man.</p> 
<p>我是一个 <i>男人</i> man. 我是一个 <i>男人</i> man..</p> 
</body>
</html>

使用实例3：选择器匹配所有作为元素的第一个子元素的 p 元素中的所有 i 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style>
p:first-child i{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>

2.5 lang伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

使用实例：:lang 类为属性值为 no 的 q 元素定义引号的类型：

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
</body>
</html>

2.6 :focus伪类

选择获得焦点的输入字段，并设置其样式。

1
2
3
input:focus{ 
background-color:yellow;
}

使用实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
input:focus{
background-color:yellow;
}
</style>
</head>
<body>

<p>在文本框中点击，您会看到黄色的背景：</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
</body>
</html>

3.伪元素

伪元素是用来添加一些选择器的特殊效果。伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

伪类/元素：

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

3.1 语法

为元素语法：

1
selector:pseudo-element {property:value;}

CSS类使用伪元素：

1
selector.class:pseudo-element {property:value;}

3.2 :first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。”first-line” 伪元素只能用于块级元素。

使用实例：根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化

1
2
3
4
p:first-line{
color:#ff0000;
font-variant:small-caps;
}

可应用于 “first-line” 伪元素的属性：

  1. font properties
  2. color properties
  3. background properties
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. clear

3.3 :first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式。”first-letter” 伪元素只能用于块级元素。

使用实例：

1
2
3
4
p:first-letter{
color:#ff0000;
font-size:xx-large;
}

可应用于 “first-letter” 伪元素的属性：

  1. font properties
  2. color properties
  3. background properties
  4. margin properties
  5. padding properties
  6. border properties
  7. text-decoration
  8. vertical-align (only if “float” is “none”)
  9. text-transform
  10. line-height
  11. float
  12. clear

3.4 伪元素和 CSS 类

伪元素可以结合 CSS 类：

使用实例：使所有 class 为 article 的段落的首字母变为红色。

1
2
p.article:first-letter {color:#ff0000;}       
<p class="article">A paragraph in an article</p>

3.5 多个伪元素

可以结合多个伪元素来使用。

使用实例：段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

1
2
3
4
5
6
7
8
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff;
font-variant:small-caps;
}

3.6 :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

使用实例：在每个 h1元素前面插入一幅图片.

1
2
3
h1:before{
content:url(smiley.gif);
}

3.7 :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

使用实例：在每个 h1 元素后面插入一幅图片：

1
2
3
h1:after{
content:url(smiley.gif);
}

4.属性选择器

属性选择器就是指可以根据元素的属性以及属性值来选择元素。具有特定属性的 HTML 元素样式不仅仅是 class 和 id。

实例：把包含标题（title）的所有元素变为蓝色.

1
2
[title]
{ color:blue; }

4.1 属性和值选择器

实例：改变了标题 title=’loong’ 元素的边框样式:

1
2
[title=loong]
{ border:5px solid green; }

4.1.1 多值

实例：包含指定值的 title 属性的元素样式，使用（~）分隔属性和值:

1
[title~=hello] { color:blue; }

实例：包含指定值的 lang 属性的元素样式，使用（|）分隔属性和值:

1
[lang|=en] { color:blue; }

4.2 表单样式

属性选择器样式无需使用 class 或 id 的形式。
实例：

1
2
3
4
5
6
7
8
9
input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }
WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/1303750973.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！