HTML css选择器

最新推荐文章于 2024-08-05 02:50:34 发布

liangkeQAQ

最新推荐文章于 2024-08-05 02:50:34 发布

阅读量635

点赞数

分类专栏： windows 文章标签： css html sass

本文链接：https://blog.csdn.net/liangkeQAQ/article/details/124676097

版权

windows 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1行内样式：和标签组合使用，仅对本行生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
</head>
<body>
    <h3 style="color:pink;">safasdg</h3>
    <h3 style="color:pink;">asfsaf</h3>
    <h3 style="color:pink;">asfasfg</h3>
    
</body>
</html>

运行结果

2内部样式：写在html文档中，仅对选中的标签生效

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        h3{
            color: aquamarine;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式</title>
</head>
<body>
    <h3>liangke</h3>
    <h3>QaQ</h3>
</body>
</html>

3外部样式：css代码写在html文档外部，使用时需要用link链接

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>liangke</h3>
    <h3>QaQ</h3>
</body>
</html>

5类选择器：.a{color：red；

}用class=“.a”来应用

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p {
            color: #ff007f;
        }
        
        .buzhidao {
            font-size: 1.875rem;
            color: #00FF00;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="buzhidao ">如鱼得水</p>
    <p class="buzhidao ">冷暖自知</p>
    <p>真的吗</p>
</body>
</html>

6 ID选择器：适用于对某一元素的操作，用id=“”来定义，并且用#来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p {
            color: #ff007f;
        }
        
        .buzhidao {
            font-size: 1.875rem;
            color: #00FF00;
        }
        #liangke{
            color: rgb(20, 92, 3);
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="buzhidao haha"id="liangke">如鱼得水</p>
    <p class="buzhidao haha">冷暖自知</p>
    <p>真的吗</p>
</body>
</html>

7后代选择器：所有的子类都会生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			ul a{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<a href="">00</a>
		<ul>
			<a href="">11</a>
			<a href="">22</a>
			<li><span><a href="">33</a></span></li>
			<li><span><a href="">44</a></span></li>
		</ul>
		<a href="">55</a>
	</body>
</html>

8子代选择器：只有子类会生效，子类的子类不会生效格式为ul>a{

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			ul>a{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<a href="">00</a>
		<ul>
			<a href="">11</a>
			<a href="">22</a>
			<li><span><a href="">33</a></span></li>
			<li><span><a href="">44</a></span></li>
		</ul>
		<a href="">55</a>
	</body>
</html>

9直接相邻选择器：代码从上向下执行，所以只对下面的与他相邻的标签生效格式为#two+p{

}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>直接相邻选择器</title>
		<style type="text/css">
			#two+p {
				color: #5B5BEB;
				background-color: #FF007F;
				font-size: 1.875rem;
			}
		</style>
	</head>

	<body>
		<span>
			<p>老大</p>
			<p id="two">老二</p>
			<p>老三</p>
			<p>老四</p>
			<p>老五</p>
		</span>
	</body>

</html>

10间接相邻选择器：代码从上往下执行，所以只对下面与之相邻的标签生效格式为#two~p{}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>直接相邻选择器</title>
		<style type="text/css">
			#two~p {
				color: #5B5BEB;
				background-color: #FF007F;
				font-size: 1.875rem;
			}
		</style>
	</head>

	<body>
		<span>
			<p>老大</p>
			<p id="two">老二</p>
			<p>老三</p>
			<p>老四</p>
			<p>老五</p>
		</span>
	</body>

</html>

11属性选择器：对标签中某一个具体的属性生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			input[type=text]{
				width: 37.5rem;
				height: 18.75rem;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="" placeholder="请输入账号" />
		<input type="password" name="" id="" value="" placeholder="请输入密码" />
	</body>
</html>

12公共选择器：可以把相同的属性写在一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公共选择器</title>
		<style type="text/css">
			input[type=text],
			input[type=password]{
				width: 37.5rem;
				height: 18.75rem;
			}
			input[type=text]{
				border: 0.0625rem solid #5B5BEB;
			}
			input[type=password]{
				border: 0.0625rem solid #00FF00;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="" placeholder="请输入账号" />
		<input type="password" name="" id="" value="" placeholder="请输入密码" />
	</body>
</html>

13伪类选择器：定义状态，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style type="text/css">
			/* 
				什么是伪类？
				伪类用于定义元素的特殊状态。 
			 */
			a{
				text-decoration: none;
				font-size: 1.875rem;
			}
			/* 未访问的链接 */
			a:link {
			  color: #FF0000;
			}
			
			/* 已访问的链接 */
			a:visited {
			  color: #00FF00;
			}
			
			/* 鼠标悬停链接 */
			a:hover {
			  color: #FF00FF;
			}
			
			/* 已选择的链接 */
			a:active {
			  color: #0000FF;
			}
			img:hover{
				width: 600px;
				cursor: pointer;
				box-shadow: 0px 0px 10px 10px #FF0000;
			}
			
			img:active{
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<a href="https://weibo.com/u/5177837067">林木婷子</a>
		<img src="./img/1.jpg" width="300px" title="" >
	</body>
</html>