HTML和CSS学习笔记第15章——其他_html第15章-优快云博客

本文链接：https://blog.youkuaiyun.com/BCadillac/article/details/107585060

本文深入探讨了CSS选择器的各种用法，包括伪元素、属性选择器、兄弟选择及开发商特定属性。同时，详细介绍了如何使用CSS变换和过渡实现元素的动态效果，如旋转和平滑过渡。

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

返回主目录

文章目录

更多css选择器
开发商特定css属性
css变换和过渡

更多css选择器

伪元素

伪元素可以用来选择元素的某些部分。例如first-letter可以选择一个块元素文本的第一个字幕，这样就能创建诸如首字母大写或首字母下沉等效果。first-line则能选择段落第一行。
语法与伪类相同：

p:first-letter{
	font-size:3em;
}

属性选择器

根据属性值选择元素：

img[width]{		//这个选择器会选择HTML中所有包含一个width属性的图像。
	border:black thin solid;
}
img[height="300"]{		//选择height为300的所有图像
	border:red thin solid;
}
image[alt~="flowers"]{	//选择alt包含单词flowers的所有图像
	border:#ccc thin solid;
}

按兄弟选择

假设你希望只选择前面有一个<h1>元素的段落：

h1+p{
	font-style: italic;
}

开发商特定css属性

语法：
开头两个短横线，两横线之间是开发商标识符的缩写，后接属性：

-moz-transform	//这里是开发商mozilla的缩写

div{
	transform:rotate(45deg);//首先需要列出通用属性，以保证属性得到支持。
	-webkit-transform:rotate(45deg);//然后列出已知开发商特定的属性。这是safari和chrome
	-moz-transform:rotate(45deg);//Mozilla
	-o-transform:rotate(45deg);//opera
	-ms-transform:rotate(45deg);//IE
}

css变换和过渡

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Transforms and Transitions</title>
	<style>
		#box {
			position: absolute;
			top: 100px;
			left: 100px;
			width: 200px;
			height: 200px;
			background-color: red;
			
		}
		#box:hover {
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg); /* Safari, Chrome, mobile Safari, and Android */
			-moz-transform: rotate(45deg); /* Firefox */
			-o-transform: rotate(45deg); /* Opera */
			-ms-transform: rotate(45deg); /* IE 9 */
		}
	</style>
</head>
<body>
	<div id="box"> 
	</div>
</body>
</html>

输入以上代码会使一个正方形旋转45度成为菱形。但不平滑旋转。

可以为box<div>增加transition属性，让它在2秒内变换到新状态。

#box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 200px;
	background-color: red;
	transition: transform 2s;
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-o-transition: -o-transform 2s;
	/* no IE support for transition until possibly IE 10 */
}