欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css样式选择器

程序员文章站 2022-03-02 18:36:55
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式选择器</title>
		
		<style>
			/* 通过标签名查找标签 找到整个html中的所有h1标签*/
			h1 {
				color: red;
			}
			/* 通过class值查找标签 */
			.content {
				text-indent: 2em;
			}
			
			.red{
				color: red;
			}
			/* 通过id查找标签 #id值 */
			#author{
				font-size: 13px;
				color: red;
			}
			/* 通过父子选择器进行查找 > 父子关系*/
			div>p{
				color: #FFA500;
			}
			
			/* #date>strong{
				font-size: 30px;
				color: black;
			} */
			
			/* 后代选择器  父级标签 子孙标签 */
			div strong{
				font-size: 30px;
				color: black;
			}
			
			/* 属性选择器 拥有某个属性的标签*/
			*[class]{
				color: aqua;
			}
			/* 属性选择器  指定属性值 */
			p[class="content"]{
				color: brown;
			}
			
			input[name="password"]{
				border-color: red;
			}
			
		</style>
		
	</head>
	<body>
		
		<h1 class="asdf">天堂图片网</h1>
		<p>天堂图片网</p>
		<!-- class 用于标记多个标签  class可以有多个值  多个值之间用 空格分割 -->
		<p class="content red solid">图片大全 - 唯美图片 - 好看的图片,天堂图片网 - 图片素材频道,提供高清晰大尺寸的各类好看的图片素材,是设计师和图片爱好者的优选图库,图片分组细致,命名准确。</p>
		
		<p class="content">联合声明包括了非歧视的市场准入、保护知识产权以及5G技术合作等双方高度关注的问题，让挑拨中欧对抗的声音显得更加牵强，缺少说服力。</p>
		
		<p class="content red">最近一段时间欧洲舆论中出现一些对欧中关系的悲观议论，但双方取得的现实进展对彼此关系显然更具描述力。*主席日前对欧洲进行了非常成功的访问，进一步夯实了双方关系积极向上的基调。这次中欧*会晤签署联合声明，展示了双方在具体问题上取得突破的能力。</p>
		<!-- id 唯一标识符  整个html文档中id必须是唯一的 同一个网页内不允许出现相同的id -->
		<p id="author">编辑：小王、<strong>小明</strong></p>
		
		<!-- 标签可以嵌套 -->
		<div>
			<p id="date">发表日期：2019-04-11
			
				<strong class="qwer">转载请注明出处</strong>
				
			</p>
			<strong>出处：凤凰新闻网</strong>
		</div>
		<!-- 输入框 -->
		<input type="text" name="username">
		<input type="password" name="password">
		
	</body>
</html>

上一篇： CSS笔记（一）样式,选择器

下一篇： 编程实现一个css选择器总结

推荐阅读