html5学习笔记（四）（摘抄讲义加部分理解）

最新推荐文章于 2022-04-21 09:51:12 发布

danchejikafo

最新推荐文章于 2022-04-21 09:51:12 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/danchejikafo/article/details/54906708

html5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中的各类选择器，包括结构性伪类、UI伪类、动态伪类及其他伪类选择器，并通过实例展示了它们的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005

讲义地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第十三章 CSS 选择器[下]

一．伪类选择器总汇

伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体

如下：
选择器名称说明 CSS 版本
:root 根元素选择器选择文档中的根元素 3
:first-child 子元素选择器选择元素中第一个子元素 2
:last-child 子元素选择器选择元素中最后一个子元素 3
:only-child 子元素选择器选择元素中唯一子元素 3
:only-of-type 子元素选择器选择指定类型的唯一子元素 3
:nth-child(n) 子元素选择器选择指定 N 个子元素 3
:enabled UI 选择器选择启用状态的元素 3
:disabled UI 选择器选择禁用状态的元素 3
:checked UI 选择器选择被选中 input 勾选元素 3
:default UI 选择器选择默认元素 3
:valid UI 选择器验证有效选择 input 元素 3
:invalid UI 选择器验证无效选择 input 元素 3
:required UI 选择器有 required 属性选择元素 3
:optional UI 选择器无 required 属性选择元素 3
:link 动态选择器未访问的超链接元素 1
:visited 动态选择器已访问的超链接元素 1
:hover 动态选择器悬停在超链接上的元素 2
:active 动态选择器激活超链接上的元素 2
:foucs 动态选择器获取焦点的元素 2
:not 其他选择器否定选择的元素 3
:empty 其他选择器选择没有任何内容的元素 3
:lang 其他选择器选取包含 lang 属性的元素 2
:target 其他选择器选取 URL 片段标识指向元素 3

二．结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
1.根元素选择器

:root {
border: 1px solid red;
}

解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素

2.子元素选择器

/**伪类都需要加上前置选择器限制范围*/
/**选择第一个子元素*/
ul>li:first-child {
	color : red;
}
/**选择最后一个子元素*/
ul > li:last-child {
	color:green;
}
/**选择只有一个子元素的那个子元素。*/
ul > li:only-child{
	color:pink;
}
/**选择只有一个指定类型的子元素的那个子元素*/
div > p:only-of-type{
	color : gray;
}
/**选择子元素的第二个元素*/
ul > li:nth-child(2) {
	color:blue;
}
/**选择子元素倒数第二个元素。*/
ul > li:nth-last-child(2) {
	color:orange;
}
/**选择特定子元素的第二个元素*/
div > p:nth-of-type(2) {
	color:red;
}
/**选择特定子元素的第二个元素*/
div > p:nth-last-of-type(2) {
	color:blue;
}

<body>
	<ul>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
		<li>我是儿子</li>
	</ul>
	<hr>
	<ul>
		<li>唯一的子元素才适用</li>
	</ul>
	<hr>
	<div>
		<p>我是段落</p>
		<span>我不是段落</span>
	</div>
	<div>
		<p>我是段落</p>
		<p>我是段落</p>
	</div>
</body>

三。UI伪类选择器

/**UI伪类选择器*/
/**选择启用状态的元素*/
/*input:enabled{
	border:1px solid red;
}*/
/**选择禁用状态的元素*/
input:disabled{
	border:1px solid blue;
}
/**选择勾选的 input 元素。*/
/*input:checked{
	display: none;
}*/
/**从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的*/
input:default{
	display: none;
}
/**输入验证合法与不合法显示时选择的元素。需要html页面增加验证required属性才有效*/
input:valid{
	border:1px solid green;
}
input:invalid{
	border:1px solid red;
}
/**根据是否具有 required 属性选择元素*/
input:required{
	border:1px orange solid;
}
input:optional{
	border:1px green solid;
}

<form>
		禁用input：<input type="text" disabled="">
		可用input:<input type="text" ><br> 
		爱好：<input type="checkbox" name="hobby" value="sing">唱歌
		valid/invalid:<input type="checkbox" name="hobby" checked="" value="dance">跳舞<br>
		<input type="text" required="">
		<input type="email" required=""><br>
		required/optional:<input type="text" required="">
		<input type="email" >
		<button>提交</button>
	</form>

四。动态伪类选择器

/**动态伪类选择器*/
/**:link 表示未访问过的超链接，:visited 表示已访问过的超链接。*/
a:link {
	color:red;
}
a:visited {
	color:blue;
}
/**表示鼠标悬停在超链接上*/
a:hover{
	color:orange;
}
/**表示鼠标按下激活超链接时,即按住鼠标左键但没松开时*/
a:active{
	color:green;
}
/**表示获得焦点时*/
input:focus{
	border:2px green solid;
}

五。其他类型

/**其他伪类选择器*/
/**否定选择器，反选*/
a:not([href*="baidu"]) {
	color:orange;
}
/**匹配没有任何内容的元素，如果去掉前置选择器p，则hr br等标签也会被隐藏*/
p:empty{
	display:none;
}
/**选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致*/
p:lang(en) {
	color:green;
}
/**定位到锚点时，选择此元素,如果html写个id为mytarget，访问页面时加上#mytarget才可以看到效果*/
b:target{
	color:orange;
}
/**这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。*/
::selection {
color: pink;
}

	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.google.com">谷歌</a>
	<a href="http://www.haosou.com">好搜</a><br> 
	<b id="mytarget">加粗</b>
	<p></p>
	<b>加粗</b>
	<p lang="en-us">abc</p>

-------------------------------------------------------------------------------------------

第 14 章 CSS 颜色与度量单位

一、颜色表方案

在古老的 HTML4 时，颜色名称只有 16 种。
颜色名称十六进制代码十进制代码含义
black #000000 0,0,0 黑色
silver #c0c0c0192,192,192银灰色
gray #808080 128,128,128 灰色
white #ffffff 255,255,255 白色
maroon #800000128,0,0栗色
red #ff0000 255,0,0 红色
purple #800080128,0,128紫色
fuchsia #ff00ff255,0,255紫红
green #008000 0,128,0 绿色
lime #00ff00 0,255,0 闪光绿
olive #808000 128,128,0 橄榄色
yellow #ffff00255,255,0黄色
navy #000080 0,0,128 海军蓝
blue #0000ff 0,0,255 蓝色
teal #008080 0,128,128 水鸭色
aqua #00ffff 0,255,255 浅绿色
当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。这里提供一些页面如下：
http://xh.5156edu.com/page/z1015m9220j18754.html
http://finle.me/colors.html
http://www.w3school.com.cn/tags/html_ref_colornames.asp

@charset "utf-8";
/**红色的不同表示方法*/
p {
	/*color : red;*/
	/*color:#ff0000;*/
	/*color:#f00;*/
	/*color:rgb(255,0,0);*/  /**用 RGB 模型表示颜色*/
	/*color:rgba(255,0,0,0.3);*/  /**同上，a 表示透明度 0~1 之间*/
	/*color:hsl(0,100%,30%);*/  /**用 HSL 模型（色相、饱和度和透明度）来表示颜色*/
	color:hsla(0,100%,30%,0.3);  /**同上，a 表示透明度 0~1 之间*/
}

二、度量单位

绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。
绝对长度单位
单位标识符说明
in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica
相对长度指的是依托其他类型的单位，也是五种。
相对长度单位
单位标识符说明
em 与元素字号挂钩
ex 与元素字体的“x 高度”挂钩
rem 与根元素的字号挂钩
px 像素，与分辨率挂钩
% 相对另一值的百分比

body{
	font-size:50px;
}
p{
	margin: 0;
	padding: 0;
	background: gray;/**背景高度是相对的*/
	/*font-size: 20px;*/
	font-size:200%;/**相对于父元素而言，如body下设置为50px，则此时显示为100px*/
	/*height: 2em;*//**如果height为2em，则背景灰色高度为字体的两倍*/
	/*height:10px;*//**这个高度是绝对值，和字体大小无关*/
	/*height:50%;*//**设置为多少，背景高度都不变，不知道原因。。*/
	width:50%;/**背景灰色宽度为50%，相对于body元素即p的父元素而言的。*/
}

---------------------------------------------------------

第15章 css文本样式

@charset "utf-8";
body{
	font-size: 50px;
}
p{

	/*font-size : 30px;*/
	/*font-size:xx-small;*/
	/*font-size:xx-large;*/
	/*font-size: small;*/
	/*font-size: medium;*/
	/*font-size: large;*/
	/*font-size: x-small;*/
	/*font-size: smaller;*//**相对于父元素的body里的设置而言*/
	font-size: larger;/**相对于父元素的body里的设置而言*/
	font-variant: small-caps;/**让小写字母以小型大写字母显示。。*/
	/**设置字体是否倾斜：normal	表示让倾斜状态恢复到正常状态。*/
	/*font-style:italic;*//*表示使用斜体**/
	font-style: oblique;/*表示让文字倾斜。区别在没有斜体时使用。*/
	/**加粗：normal	表示让加粗的字体恢复正常。bold：粗体;bolder,更粗的字体;lighter	轻细的字体;100 ~ 900 之间的数字	600 及之后是加粗，之前不加粗*,/
	/*font-weight: bolder;*/
	/*font-weight: lighter;*/
	font-weight: 700;
	/**字体*/
	/*font-family: 微软雅黑,楷体,宋体;*//**从C盘里找的font字体，如果用户没有该字体则使用备用字体,优先级从左到右优先使用*/
	/**简写方式*/
	font:italic bolder small=small-caps  100px 楷体 ;/**大小和字体的设置放到最后，其他设置可以无序放到前面*/
}

一、文本汇总

属性名	说明	CSS 版本
text-decoration	装饰文本出现各种划线。	1
text-transform	将英文文本转换大小写。	1
text-shadow	给文本添加阴影	3
text-align	设置文本对齐方式	1,3
white-space	排版中的空白处理方式	1
letter-spacing	设置字母之间的间距	1
word-spacing	设置单词之间的间距	1
line-height	设置行高	1
word-wrap	控制段词	3
text-indent	设置文本首行的缩进	1

二、文本样式

@charset "utf-8";
p{
	font-size: 50px;
	/**文本装饰*/
	/*text-decoration: underline;*//*底部加一条下划线*/
	/*text-decoration: overline;*//**头顶加下划线*/
	/*text-decoration: line-through;*//*中间贯穿线*/
	
	/**英文大小写转换*/
	/*text-transform: uppercase;*//*都转为大写*/
	/*text-transform: lowercase;*//**都转为小写*/
	text-transform: capitalize;/**将英文单词首字母大写*/

	/**阴影：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）*/
	text-shadow: 5px 5px 3px gray;
}
a{
	text-decoration: none;/*去掉链接原来有的下划线*/
}

三、文本控制

p{/**文本控制*/
	background: silver;
	/*text-align: left;*/
	/*text-align: right;*/
	/*text-align: center;*/
	/*text-align: justify;*//**内容两端对齐*/
	
	/**处理空白排版方式*/
	/*white-space: nowrap;*//**空白符被压缩，文本不换行*/
	/*white-space: pre;*//**空白符被保留了，文本遇到换行符才换行*/
	/*white-space: pre-line;*//*空白符被压缩，文本会在排满或遇换行符换行*/
	white-space: pre-wrap;/*空白符被保留，文本会在排满或遇换行符换行**/

	letter-spacing: 4px;/**设置文本间距*/
	word-spacing: 10px;/**设置英文单子之间的间距*/
	line-height: 1.5;/**设置段落行高，normal-设置默认间距；长度值	比如：“数字”+“px”；数值	比如：1,2,3；%	比如：200%*/
	word-wrap: break-word;/*让过长的英文单词断开*/
	 text-indent: 100px;/*设置文本首行的缩进*/}

----------------------------------

第16章 css盒模型

一．元素尺寸
CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：
属性值说明CSS 版本
width auto、长度值或百分比设置元素的宽度 1
height auto、长度值或百分比设置元素的高度 1
min-width auto、长度值或百分比设置元素最小宽度 2
min-height auto、长度值或百分比设置元素最小高度 2
max-width auto、长度值或百分比设置元素最大宽度 2
max-height auto、长度值或百分比设置元素最大高度 2
二．元素内边距
CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：
属性值说明CSS 版本
padding-top 长度值或百分比设置顶部内边距 1
padding-bottom 长度值或百分比设置底部内边距 1
padding-left 长度值或百分比设置左边内边距 1
padding-right 长度值或百分比设置右边内边距 1
padding 1 ~ 4 个长度值或百分比简写属性 1

三．元素外边距
CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：
属性值说明CSS 版本
margin-top 长度值或百分比设置顶部内边距 1
margin-bottom 长度值或百分比设置底部内边距 1
margin-left 长度值或百分比设置左边内边距 1
margin-right 长度值或百分比设置右边内边距 1
margin 1 ~ 4 长度值或百分比简写属性 1

@charset "utf-8";
div{
	background: silver;
	margin: 0;
	width:120px;
	height: 120px;
	
	/**这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。*/
	/*min-width: 100px;
	min-height: 100px;
	max-width: 300px;
	max-height: 300px;*/
	
	/**内边距会增加总长度*/
	/*padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;*/
	/*padding:10px 20px;*//**上下空出10px，左右空出20px*/
	/*padding: 10px 20px 30px;*//**上10，下30，左右20*/
	padding:10px 20px 30px 40px;/**顺时针，上右下左*/

	/**外边距不会算到总长度里*/
	margin-top: 50px;
	margin-left: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒模型【上】</title>
	<link rel="stylesheet" type="text/css" href="css/style5.css">
</head>
<body>
	<div>我是html5我是html5我是html5我是html5我是html5我是html5我是html5</div>
</body>
</html>

四、处理溢出

当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。

div{
	/**处理溢出*/
	/*overflow-y: visible;*//*默认值，不管是否溢出，都显示内容*/
	/*overflow-y: auto;*//*浏览器自行处理溢出内容，如果有溢出就显示滚动体，否则不显示*/
	/*overflow-y: hidden;*//*如果有溢出内容，直接裁掉。*/
	overflow-y: scroll;/*不管是否溢出，都会显示滚动体，不同平台显示方式不一样*/
}

五、元素可见性

<body>
	<div>我是html5</div>
	abcde
	<table border="1">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
</body>

@charset "utf-8";
div{
	background: silver;
	height: 200px;
	width: 200px;

	/*visibility: visible;*/
	/*visibility: hidden;*//**元素不可见，但会占用空间*/
}

table tr:first-child {
		/*visibility:hidden;*/
		visibility: collapse;/*元素不可见，隐藏表格的行与列，如果不是表格，则和 hidden 一样。*/
}

六、元素盒类型
CSS 盒模型中的 display 属性，可以更改元素本身盒类型。那么元素有哪些盒类型呢？主要有：1.块级元素（区块）；2 行内元素（内联）；3 行内-块级元素（内联块）；4.隐藏元素。

1.块级元素
所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。
2.行内元素
所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。
3.行内-块元素
所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。

@charset "utf-8";
div{

	background: silver;
	height: 200px;
	width: 200px;
}
span{

	background: yellow;
	height: 200px;
	width: 200px;
}
img{
	height: 100px;
    width: 100px;

}
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒模型（三）</title>
	<link rel="stylesheet" type="text/css" href="css/style7.css">
</head>
<body>
	<div>我是块级元素</div>
	<span>我是行内元素，不能设置高宽</span>
	<img src="0034TG2Qgy71wxSkoYh19&690.jpg">
	adfad
</body>
</html>

有示例可知块元素可以设置块的高宽等，行元素设置背景高宽也不起作用，图片可以设置大小，但不能隔离其他元素。

下面的例子，展示如何互相转换：

div{

	background: silver;
	height: 200px;
	width: 200px;
	display: inline;
}
span {
	background: yellow;
	height: 200px;
	width: 200px;
	display: block;

}

	<div>我是块级元素，将要转成行内元素</div>
	<span>我是行内元素，将要转成块级元素</span>
	adfad

下面的示例展示转为行内块：

<div>我是块级元素，将要转成行内块元素</div>
	<span>我是行内元素，将要转成行内块元素</span>

div,span{
	background: silver;
	height: 200px;
	width: 200px;
	display: inline-block;
}

//将元素隐藏且不占位

div { display: none;
}

七、元素的浮动

当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用 clear 属性来处理。

属性值说明 CSS 版本
clear none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 1
//两边均不可浮动
#c { background: navy; clear: both;
}