css3样式选择器

最新推荐文章于 2023-10-18 23:46:29 发布

CJW-Coder

最新推荐文章于 2023-10-18 23:46:29 发布

阅读量352

点赞数

分类专栏： css 文章标签： css选择器

本文链接：https://blog.csdn.net/qq_42143163/article/details/98781572

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

			/* 通过标签名直接查找 找到整个html中所有的h1标签 */
			h1{
				color: #00FFFF;
			}
			/* 通过class值查找标签 */
			.content{
				text-indent: 2em;
			}
			.red{
				color: blue;
			}
			/* 通过id查找标签 #id值 */
			#author{
				font-size:13px;
				color: red;
				
			}
			/* 通过父子选择器进行查找 > 父子关系 */
			div>p{
				color: #FF0000;
				
			}
			#date>strong{
				font-size: 30px;
				color: black;
			}
			/*后代选择器 父级标签 子孙标签  */
			div strong{
				font-size: 25px;
				color:beige;
				
			}
			/* 属性选择器 拥有某个属性的标签 */
			*[class]{
				color: darkmagenta;
			}
			/* 属性选择器 指定属性值 */
			p[class="content"]{
				color: brown;
			}
			input[name="password"]{
				border-color:forestgreen;
			}

2.css 伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css伪类选择器</title>
		<style>
			#a1{
				text-decoration: none;
				color:black;
				
			}
			/* 当元素处于某种状态时，能触发的一些样式 */
			/* 当鼠标经过标签内，触发 */
			#a1:hover{
				color:#008000;
				
			}
			/* 聚焦 当元素获得焦点时，触发 一个网页中只能有一个元素处于聚焦转态 */
			#a1:focus{
				color:blue;
			}
			/* visited  当a标签被点击之后 已经被访问过*/
			#a1:visited{
				color:orange;
				
			}
			/* active 鼠标按下去的时候  */
			#a1:active{
				color: palevioletred;
			}
			/* before 添加前缀 */
			/* 某些特殊符号，可能会污染真实内容，这些特殊符号可以用前缀或后缀的方式添加 */
			#a1:before{
				content:'?';
				color: #ADD8E6;
				font-size: 30px;
				}
				
			#a1:after{
					content:'!';
					color: #000000;
					font-size:30px;
				}
				
			p{
				color:#0000FF;
				font-size: 20px;
				
			}
			/* first-letter 元素中的第一个文字 */
			p:first-letter{
				color: red;
				font-size:35px;
				
			}
			/* first-line 第一行 */
			p:first-line{
				color: #008000;
			}
			
			input:focus{
				border:none;
				border: 2px red solid;
				box-shadow: 0 0 10px #008000;
			}
		</style>
	</head>
	<body>
		
		<a id="a1" href="http://www.baidu.com">百度一下</a>
		
		<p>将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能将您在浏览器中输入的内容发送给 Google，以便提供更智能的拼写检查功能</p>
		<input type="password" placeholder="请输入银行卡密码" />
	</body>
</html>

CJW-Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3样式选择器

/* 通过标签名直接查找找到整个html中所有的h1标签 */ h1{ color: #00FFFF; } /* 通过class值查找标签 */ .content{ text-indent: 2em; } .red{ color: blue; } /* 通过id查找标签 #id值 */ #author{ ...
复制链接

扫一扫

专栏目录