CSS中的样式及选择器

道法—自然

于 2019-12-06 21:35:07 发布

阅读量190

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端总结

本文链接：https://blog.youkuaiyun.com/wyqwilliam/article/details/103430005

本文深入探讨了CSS中的各种样式应用和选择器的使用，包括类选择器、ID选择器、元素选择器以及更高级的选择器如伪类和属性选择器。通过实例解析，帮助读者掌握如何更精确地控制网页元素的样式表现。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器和常用样式学习</title>
		<style type="text/css">
		/*id选择器*/
			#div01{
				background-image: url(img/1.jpg);
				background-color: royalblue;
			}
			/*标签选择器*/
			div{
				background-color: red;
			}
			/*类选择器*/
			.common{
				background-color: orange;
			}
			/*组合选择器*/
			#div01,#ta,p{
				border: 2px;
				width: 300px;
				height: 300px;
			}
			/*子选择器*/
			以上这种选择器的意思就是：将该div下的b标签的内容设置成这样的样式；而且仅仅是这个标签下边的；此设置对于别的选择器不起作用。
			div>b{
				font-family: "微软雅黑";
				color: greenyellow;
			}
			/*属性选择器*/
			该样式的意思就是：在改输入框中输入的字体，其中颜色为样式中设置的这个样子。
			input[name=uname]{
				color: red;
			}
			/*常用样式*/
			#showdiv{
				/*边框设置*/
				border: solid 1px;
				/*大小设置*/
				width: 300px;
				height: 300px;
				/*字体样式*/
				font-size: 20px;
				font-family: "微软雅黑";
				font-weight: bold;
				font-style: italic;
				color: red;
				/*背景样式*/
				backgro