css选择器

最新推荐文章于 2023-03-29 14:05:09 发布

不吃午饭杜紫藤

最新推荐文章于 2023-03-29 14:05:09 发布

阅读量147

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_39153706/article/details/107301382

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css选择器:

css根据html结合的第二种方式，内部样式，得配合选择器（选择一个或多个标签的语法）。

id选择器

. id选择器一次只能选中一个标签；

. 在这对标签内，进行样式的编写，然后通过id选择这个标签；

. 每个标签的id都是唯一的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style type="text/css">
			 #mydiv{
				 color: red; 
				 font-size: 100px;
			 }
			 #mydiv2{
				 color: yellow;
				 font-size: 200px;
				 
			 }
		 </style>
		
	</head>
	<body>
		<div id="mydiv">
			一行文本
		</div>
		<div id="mydiv2">
			哈呵呵
		</div>
	</body>
</html>

类选择器

. 类选择器：一起可以选择多个标签。

. 类选择器是指定类的所有元素的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myClass{
				color: red;
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		<h1 class="myClass">类选择器</h1>
		<ul class="myClass">
			<li>类选择器</li>
			<li>类选择器</li>
			<li>类选择器</li>
			<li>类选择器</li>
		</ul>
	</body>
</html>

伪类选择器

伪类选择器可以表示四种状态
1.链接状态
2.鼠标悬浮状态
3.鼠标按下状态
4.链接访问过后的状态
以上四种状态，我们都可以通过伪类选择器进行选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{			//链接状态；
	 			color: aqua;
				/* 设置线条样式  none 去掉下划线 */
				text-decoration: none;
			}

			a:hover {		//鼠标光标悬停状态；
				color: #FF0000;
				font-size: 50px;
				/* 设置线条样式  none 去掉下划线 */
				text-decoration: none;
			}

			a:active {		//鼠标点击按下时的状态；
				color: #FFFF00;
				font-size: 20px;
				/* 设置线条样式  none 去掉下划线 */
				text-decoration: none;
			}

			a:visited {		//链接访问过后的状态；
				color: antiquewhite;
				font-size: 300px;
				/* 设置线条样式  none 去掉下划线 */
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">进入百度</a>
		<!-- ctrl+alt+空格 手动提示 -->
		<a href="类选择器.html">进入百度</a>
	</body>
</html>

标签名选择器

标签名选择器选择指定元素名称的所有元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<span>标签名选择器</span>
		<span>标签名选择器</span>
		<span>标签名选择器</span>
		<span>标签名选择器</span>
		<span>标签名选择器</span>
	</body>
</html>

包含选择器

包含选择器用于选择元素内部的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
			<title></title> 
		<style>
		div p{
    		background-color:yellow;
			}
		</style>
	</head>
	<body>
			<div>
			<p>段落 1。 在 div 中。</p>
			<p>段落 2。 在 div 中。</p>
			</div>
			<p>段落 3。不在 div 中。</p>
			<p>段落 4。不在 div 中。</p>
	</body>
</html>

属性选择器

属性选择器选择所有带有被选择属性的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1[align] {
				color: red;
			} 
			h1[align='right'] {
				color:yellow;
			}
			
			
		</style>
	</head>
	<body>
		<h1 align="center">asdfasdfadfadf</h1>
		<h1 align="left">asdfasdfadfadf</h1>
		<h1 align="right">asdfasdfadfadf</h1>
	</body>
</html>

通配符选择器

*选择器选择所有元素；

<!DOCTYPE html>
<html>
	<head>
	<style>
	*{
		background-color:yellow;
	}
	</style>
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
		<div class="intro">
		<p id="firstname">My name is Donald.</p>
		<p id="hometown">I live in Duckburg.</p>
		</div>
		<p>My best friend is Mickey.</p>
</body>
</html>

*选择器也可以选择另一个元素内的所有元素

例：选择div元素内的所有元素

<!DOCTYPE html>
<html>
	<head>
		<style>
	div *{
	background-color:yellow;
	}
		</style>
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
		<div class="intro">
			<p id="firstname">My name is Donald.</p>
			<p id="hometown">I live in Duckburg.</p>
		</div>
		<p>My best friend is Mickey.</p>
</body>
</html>

相邻选择器

相邻选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title></title> 
	<style>
	div+p{
	background-color:yellow;
}
	</style>
	</head>
	<body>
	<h1>文章标题</h1>
	<div>
		<h2>DIV 内部标题</h2>
		<p>DIV 内部段落。</p>
	</div>
		<p>DIV 之后的第一个 P 元素。</p>
		<p>DIV 之后的第二个 P 元素。</p>
	</body>
</html>

子类选择器

子类选择器用于选择特定父元素。

注意: 元素没有被选中是不能直接指定父级的子元素。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title></title> 
	<style>
	div>p{
    background-color:yellow;
}
	</style>
	</head>
	<body>
	<h1>Welcome to My Homepage</h1>
	<div>
		<h2>My name is Donald</h2>
		<p>I live in Duckburg.</p>
	</div>
	<div>
		<span><p>I will not be styled.</p></span>
	</div>
		<p>My best friend is Mickey.</p>
	</body>
</html>

不吃午饭杜紫藤

关注

0
点赞
踩
0

收藏

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

css选择器:css根据html结合的第二种方式，内部样式，得配合选择器（选择一个或多个标签的语法）。id选择器. id选择器一次只能选中一个标签；. 在这对标签内，进行样式的编写，然后通过id选择这个标签；. 每个标签的id都是唯一的。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="
复制链接

扫一扫