CSS 简单基础选择器

最新推荐文章于 2024-05-23 22:59:55 发布

王的蓝色大海

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量48

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/m0_57150836/article/details/118219772

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

	<head>
		<meta charset="utf-8">
		<title>选择器练习</title>
		<style type="text/css">
		body{
			background-image: url(img/04.jpg);
		}
		h1{
			color: #FF0000;
			text-align: center;
		}
		h2{
			color: #0000FF;
		}
		
			
			#p1{
				color: #0000FF;
			}
			#p2{
				color: #FF0000;
			}
			#p3{
				color: #FFFF00;
			}
			.p4{
				color: #0000FF;
			}
			.p5{
				color: #FF0000;
			}
			.p6{
				color: #FFFF00;
			}
			p#p7{
				color: #0000FF;
			}
			p#p8{
				color: #FF0000;
			}
			p.p9{
				color: #0000FF;
			}
			p.p10{
				color: #FF0000;
			}
			[title]{
				color: #0000FF;
			}
			[href^="https"]{
				color: #FFFF00;
			}
			
		</style>
	</head>
	<body>
		<center>
		<h1>将进酒</h1>
		<h2>唐 李白</h2>
		<p id="p1">君不见，黄河之水天上来，奔流到海不复回。</p>
			
		<p id="p2">君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
			
		<p id="p3">	人生得意须尽欢，莫使金樽空对月。</p>
			
		<p class="p4">	天生我材必有用，千金散尽还复来。</p>
			
		<p class="p5">	烹羊宰牛且为乐，会须一饮三百杯。</p>
			
		<p class="p6">	岑夫子，丹丘生，将进酒，杯莫停。</p>
			
		<p id="p7">	与君歌一曲，请君为我倾耳听。</p>
			
		<p id="p8">	钟鼓馔玉不足贵，但愿长醉不复醒。</p>
			
		<p class="p9">	古来圣贤皆寂寞，惟有饮者留其名。</p>
			
		<p class="p10">	陈王昔时宴平乐，斗酒十千恣欢谑。</p>
			
		<p title="倒数第二句">	主人何为言少钱，径须沽取对君酌。</p>
			
		<p title="倒数第一句">	五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
		<a href="https://baidu.com" target="_blank">打开百度</a>
		
		</center>
	</body>

ID选择器: 根据标签内的属性id 进行样式设置标签选择器 :直接根据标签名进行样式设置

类选择器 :根据标签内属性class 进行样式设置组合选择器 h1, p,div{} (用逗号隔开)

p#id{} P.class{}

属性选择器例如[title]{

color }

[href^=" "]{} 以什么开头

[href$=" "]{} 以什么结尾

[href*=" "]{} 其中包含什么

href可以是src