选择器的样式-优快云博客

该博客涉及前端开发，主要围绕HTML和JavaScript两种技术。HTML是网页结构搭建的基础，JavaScript则为网页赋予动态交互能力，二者在前端开发中起着关键作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 选择器   id  class  标签 -->
		<style type="text/css">
			/* * {
				margin: 0;
				padding: 0;
			} */
			/* a {
				text-decoration: none;
			} */
			/* ul {
				list-style: none;
				list-style-type: none;
			} */
			/* .box1::after {
				content: "$";
				color: red;
				margin: 0 0 0 50px;
			}
			.box1::before {
				content: "请支付";
				font-size: 20px;
				margin: 0 50px 0 0;
			}
			p:first-child {
				font-size: 50px;
				color: pink;
			}
			p:last-child {
				font-size: 60px;
				color: green;
			}
			p:nth-child(2) {
				font-size: 30px;
				color: orange;
			} */
			/* .box2:link {
				background-color: pink;
			}
			.box2:visited {
				color: red;
			} */
			/* .box2 {
				background-color: orange;
			} */
			/* .box2:active {
				color: #0000FF;
			} */
			.box2:hover {
				font-size: 50px;
				color: deeppink;
				border: 1px solid red;
			}
			/* 获取焦点 */
			input:focus {
				width: 200px;
				height: 80px;
				border: 5px solid pink;
			}
			.box2 {
				text-decoration: none !important;
			}
			/* !important权重最高>id>class>属性>标签 */
			/* p {
				font-size: 30px !important;
				color: orange !important;
			} */
			
			/* #ids {
				font-size: 70px;
				color: blue;
			} */
			/* [name="names"] {
				font-size: 80px;
				color: green;
			} */
			/* .text1 {
				font-size: 60px;
				color: aqua;
			} */
			
			/* p {
				font-size: 50px;
				color: pink;
			} */
			
			/* 派生选择器 */
			/* .a p {
				font-size: 50px;
				color: red;
			} */
			/* 直接子元素选择器 */
			/* .a>.b>p {
				font-size: 30px;
				color: orange;
			} */
			/* 相邻兄弟选择器 */
			/* div+p {
				font-size: 50px;
				color: red;
			} */
			/* 所有兄弟选择器 */
			/* div~p {
				font-size: 50px;
				color: red;
			} */
			/* 所有子元素选择器 */
			/* div * {
				font-size: 50px;
				color: red;
			} */
			
			.a {
				width: 300px;
				height: 200px;
				border: 1px solid pink;
			}
			
		</style>
	</head>
	<body>
		<!-- <div>
			<p class="box1">999</p>
			<p>888</p>
			<p>777</p>
			<p>666</p>
		</div>
		
		<a class="box2" href="http://www.baidu.com">我是a1</a>
		<a href="">我是a2</a>
		<input type="text"> -->
		<div class="a">
			<div class="b">
				<p name="names" id="ids" class="text1">123</p>
				<p class="text1">456</p>
			</div>
			<p>7777777777</p>
			<p>888888888</p>
		</div>
		<p>000000000</p>
		<p>1111111111</p>
		<hr >
		<ul>
			<li>111111</li>
			<li>2222222</li>
			<li>3333333333</li>
		</ul>
		
	</body>
</html>