CSS3

博主： Xherlock
发布时间：2021 年 10 月 11 日
528 次浏览
暂无评论
3260字数
分类： Web前端

# CSS（三）

## 盒子模型

### 属性选择符

标签名[属性值]

标签名[属性名="属性值"]

### 伪类选择符

伪类：选择器，用于选择出于特定状态的元素，它的使用更多地弥补了css选择器的不足，用来更方便地获取信息

伪类通常指的时添加实际的类

伪元素指的是添加

#### UI伪类

##### 链接伪类

eg:

~~~html
a:link{
	color: red;
}
~~~

link:	链接等待用户点击的状态

visited:	用户此前已经点击过链接

hover:	用户鼠标悬停在链接上

focus:	链接拥有焦点时

active:	链接正在被点击（鼠标在元素上按下，但还没有释放）

css定义时要按照上面的顺序进行定义选择符

##### :focus伪类

e:focus:	一个元素在获得焦点时选择这个元素，e表示HTML中的任意元素

一般用于表单（input、textarea）

~~~html
input:focus{
    border: 5px solid red;
    background-color: lightblue;
}
~~~

![请输入图片描述](http://120.78.215.15/usr/uploads/2021/10/882502839.png)

##### :target伪类

e:target：	如果用户点击一个指向页面中其他元素的链接，则那个元素为选中的目标

eg:

~~~html
#more_info:target{
	background: #eee;
}
<a href="#more_info">More information</a>
<h2 id="more_info">
    This id the information you are looking for!
</h2>
~~~

#### 结构伪类

##### :first_child和:last_child

分别表示同一组同胞元素中的第一个和最后一个元素

eg:

下面的1会变蓝,3会变红

~~~html
ol.results li:first-child{
	color: blue;
}
ol.results li:last-child{
	color: red;
}
<ol class="results">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
~~~

#### :nth-child

e:nth-child(n):	e表示元素名，n表示数值，即选择e中的每个第n项

常用于提高表格地可读性（行交替使用不同颜色）

#### 伪类大全

:active	选择正在被激活的元素
:hover	选择被鼠标悬浮着元素
:link	选择未被访问的元素
:visited	选择已被访问的元素
:first-child	选择满足是其父元素的第一个子元素的元素
:lang	选择带有指定 lang 属性的元素
:focus	选择拥有键盘输入焦点的元素
:enable	选择每个已启动的元素
:disable	选择每个已禁止的元素
:checked	选择每个被选中的元素
:target	选择当前的锚点元素
:first-of-type	选择满足是其父元素的第一个某类型子元素的元素
:last-of-type	选择满足是其父元素的最后一个某类型子元素的元素
:only-of-type	选择满足是其父元素的唯一一个某类型子元素的元素
:nth-of-type(n)	选择满足是其父元素的第n个某类型子元素的元素
:nth-last-of-type(n)	选择满足是其父元素的倒数第n个某类型的元素
:only-child	选择满足是其父元素的唯一一个子元素的元素
:last-child	选择满足是其父元素的最后一个元素的元素
:nth-child(n)	选择满足是其父元素的第n个子元素的元素
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素
:empty	选择满足没有子元素的元素
:in-range	选择满足值在指定范围内的元素
:out-of-range	选择值不在指定范围内的元素
:invalid	选择满足值为无效值的元素
:valid	选择满足值为有效值的元素
:not(selector)	选择不满足selector的元素
:optional	选择为可选项的表单元素，即没有“required”属性
:read-only	选择有"readonly"的表单元素
:read-write	选择没有"readonly"的表单元素
:root	选择根元素

### 伪元素类选择符

#### 伪元素大全

eg:

~~~html
p::first-letter{
	font-size: 2em;
	color: red;
}
p#age::before{
	content: "年龄：";
}
<p id="age">
    25
</p>

~~~

### 继承

### 层叠

是指样式表的层叠，当一个元素有多个样式来源时，最终确定元素最终使用哪种样式的

I-C-E公式判定选择符特指度

* 一个ID，在I上加一
* 一个类，在C上加一
* 一个元素名，在E上加一

![请输入图片描述](http://120.78.215.15/usr/uploads/2021/10/1167189497.png)

### 浮动与清除

标准流：html文档的文本布局。它是从上到下，从左到右的展示方式

在标准流中，块级元素独自占用一行，垂直放置。行级元素(内联元素)在水平方向从左到右排列

块级元素 ：div、p、 form 、ul、 li、 ol、 dl、 address、 filedset、 table、hr

行内元素: span,、strong,、em 、img、 a、input、label、 select、 textarea、cite;

块级元素会独占一行，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化；

块级元素可以设置 width, height属性，行内元素设置width, height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】

块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。**（水平方向有效，竖直方向无效）**

最后修改：2021 年 11 月 13 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

C语言递归
浏览次数: 502
pytorch数据迁移、转换
浏览次数: 374
C++学习
浏览次数: 1603
可供选择的体系结构
浏览次数: 461
实体-联系建模
浏览次数: 1192

CSS3

Xherlock • 2021 年 10 月 11 日

# CSS（三）

## 盒子模型

### 属性选择符

标签名[属性值]

标签名[属性名="属性值"]

### 伪类选择符

伪类：选择器，用于选择出于特定状态的元素，它的使用更多地弥补了css选择器的不足，用来更方便地获取信息

伪类通常指的时添加实际的类

伪元素指的是添加

#### UI伪类

##### 链接伪类

eg:

~~~html
a:link{
	color: red;
}
~~~

link:	链接等待用户点击的状态

visited:	用户此前已经点击过链接

hover:	用户鼠标悬停在链接上

focus:	链接拥有焦点时

active:	链接正在被点击（鼠标在元素上按下，但还没有释放）

css定义时要按照上面的顺序进行定义选择符

##### :focus伪类

e:focus:	一个元素在获得焦点时选择这个元素，e表示HTML中的任意元素

一般用于表单（input、textarea）

~~~html
input:focus{
    border: 5px solid red;
    background-color: lightblue;
}
~~~

![请输入图片描述](http://120.78.215.15/usr/uploads/2021/10/882502839.png)

##### :target伪类

e:target：	如果用户点击一个指向页面中其他元素的链接，则那个元素为选中的目标

eg:

~~~html
#more_info:target{
	background: #eee;
}
<a href="#more_info">More information</a>
<h2 id="more_info">
    This id the information you are looking for!
</h2>
~~~

#### 结构伪类

##### :first_child和:last_child

分别表示同一组同胞元素中的第一个和最后一个元素

eg:

下面的1会变蓝,3会变红

~~~html
ol.results li:first-child{
	color: blue;
}
ol.results li:last-child{
	color: red;
}
<ol class="results">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
~~~

#### :nth-child

e:nth-child(n):	e表示元素名，n表示数值，即选择e中的每个第n项

常用于提高表格地可读性（行交替使用不同颜色）

#### 伪类大全

### 伪元素类选择符

#### 伪元素大全

eg:

~~~html
p::first-letter{
	font-size: 2em;
	color: red;
}
p#age::before{
	content: "年龄：";
}
<p id="age">
    25
</p>

~~~

### 继承

### 层叠

是指样式表的层叠，当一个元素有多个样式来源时，最终确定元素最终使用哪种样式的

I-C-E公式判定选择符特指度

* 一个ID，在I上加一
* 一个类，在C上加一
* 一个元素名，在E上加一

![请输入图片描述](http://120.78.215.15/usr/uploads/2021/10/1167189497.png)

### 浮动与清除

标准流：html文档的文本布局。它是从上到下，从左到右的展示方式

在标准流中，块级元素独自占用一行，垂直放置。行级元素(内联元素)在水平方向从左到右排列

块级元素 ：div、p、 form 、ul、 li、 ol、 dl、 address、 filedset、 table、hr

行内元素: span,、strong,、em 、img、 a、input、label、 select、 textarea、cite;

块级元素可以设置 width, height属性，行内元素设置width, height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】

发表评论 取消回复

CSS3

发表评论取消回复