CSS选择器Selector

最新推荐文章于 2024-03-16 02:50:23 发布

森-Js

最新推荐文章于 2024-03-16 02:50:23 发布

阅读量1.2k

点赞数

分类专栏： Java【洗髓】网页基础 CSS 文章标签： CSS 选择器

本文链接：https://blog.csdn.net/gjs935219/article/details/99172113

版权

Java【洗髓】同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

网页基础

12 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一、DOM

DOM, Document Object Model

文档对象模型

在HTML页面里，浏览器根据<body>和里面的所有标签，建立一个树状结构

<body>下的每个节点，称为元素Element

例如：

元素的通用属性：

元素都有一些属性，例如

id	给改元素设置一个全局唯一的ID
name	给改元素设置一个名字
class	设置样式类名
style	设置临时样式
......	.......................

<img id="logo" src="img/U7015P1134DT20121120162824.jpg" />

注：不要把显示的内容放在<body>以外

二、类选择器

类选择器示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>信息统计</title>
		<style>
			
			/*普通按钮*/
			.my-button{
				padding: 8px;
				border: 1px solid silver;
				font-size: 12px;
				color: black;
				background-color: #f1f1f1;
				min-width: 60px;
			}
			
			/*默认按钮*/
			.my-button-default{
				background-color: #0078D7;
				color: #f1f1f1;
				border-color: #F1F1F1;
			}
		</style>
	</head>
	<body>
		<p>
			<button class="my-button">新建</button>
			<button class="my-button">删除</button>
			<button class="my-button">添加图片</button>
			<button class="my-button">添加链接</button>
		</p>
		
		<p>
			<textarea style="width:400px;height: 200px"></textarea>
		</p>
		
		<p>
			<button class="my-button ">放弃编辑</button>
			<button class="my-button my-button-default">发布</button>
		</p>
	</body>
</html>

类选择器Class Selector

示例：

.my-button

{

}

用于指定所有class="my-button"的元素的样式。

*指定多个class

一个元素可以指定多个class

<button class="my-button my-button-default">发布</button>

规则：

-定义多个样式

-指定样式时，以空格分开

*优先级问题

当多个样式出现冲突时：

例如：

.my-button{}

.my-button-default{}

其中，.my-button-default{}的优先级更高，因为他是后出现的，

验证：打开谷歌开发者工具来验证：

1.2.3.4四部即可看出

多个class选择器，后定义的优先级高

三、标签类型选择器

标签类型示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>信息统计</title>
		<style>
			
			/*基础按钮样式*/
			button{
				padding: 8px;
				border: 1px solid silver;
				border-radius: 6px;
				font-size: 12px;
				color: black;
				background-color: #f1f1f1;
				min-width: 60px;
			}
			
			/*默认按钮*/
			button.my-default{
				background-color: #0078D7;
				color: #f1f1f1;
				border-color: #F1F1F1;
			}
		</style>
	</head>
	<body>
		<p>
			<button>新建</button>
			<button>删除</button>
			<button>添加图片</button>
			<button>添加链接</button>
		</p>
		
		<p>
			<textarea style="width:400px;height: 200px"></textarea>
		</p>
		
		<p>
			<button>放弃编辑</button>
			<button class="my-default">发布</button>
		</p>
	</body>
</html>

统一设定某种标签的样式

例如：

button{

}

标签与类结合使用

button.my-default{

}

标签类型为<button>、并且class="my-default"的元素

四、ID选择器

元素的ID

每个元素都可以设计一个id属性

例如：

<button id="ok">发布</button>

由于ID应该是在页面内唯一的，为了避免重复，一般应该命名较长一些

例如：editor-ok-button editor-cancel-button

ID选择器

ID Selector，ID选择器

指定某个元素的ID的元素的样式

注：

1、ID应该是在页面内唯一的，即通过一个id可以唯一定位一个元素

2、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

优先级

在Chrome里观察Type Selector和ID Selector的优先级顺序....ID Selector

优先级顺序：

内联样式	1000	<button style='width:400px;height:200px'></button>
ID选择器	100	<button id="ok">发布</button>
类选择器	10	<button class="my-button">发布</button>
标签类型	1	......

ID选择器示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加信息</title>
		
		<style>
			
			/*基础按钮样式*/
			button{
				padding: 8px;
				border: 1px solid silver;
				border-radius: 6px;
				font-size: 12px;
				color: #222;
				background-color: #F1F1F1;
				min-width: 60px;
			}
			
			/*CSS 中 id 选择器以 "#" 来定义。*/
			#ok
			{
				background-color: #0078D7;
				color: #F1F1F1;
				border-color: #F1F1F1;
			}
			
			#cancel
			{
				background-color: #FF4300;
				color: #F1F1F1;
				border-color: #F1F1F1;
			}
		</style>

	</head>
	<body>
		<!--一般用div进行布局-->
		<p>
			<button>新建</button>
			<button>删除</button>
			<button>添加图片</button>
			<button>添加链接</button>
		</p>
		
		<p>
			<textarea style="width: 400px;height: 200px"></textarea>
		</p>
		
		<p>
			<button id="cancel">放弃编辑</button>
			<button id="ok">发布</button>
		</p>
	</body>
</html>

五、伪类选择器

伪类选择器Pseudo-Class-Selector

即：为元素的每一种状态定义一个样式

xxx	普通状态显示
xxx:hover	鼠标移上去的状态显示
xxx:active	鼠标按下去的状态显示
xxx:focus	焦点状态下的状态显示

其中，xxx可以是ID/class/Type Selector

例如：

.my-button：focus{}

img：disabled{}

#ok:hover{}

伪类选择器示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 基础按钮样式 */
			button{
				padding: 8px;
				border: 1px solid silver;
				border-radius: 6px;
				font-size: 12px;
				color: #222;
				background-color: #f1f1f1;
				min-width: 60px;
				outline: none; /* 去掉轮廓 */
			}
			
			/*鼠标移过去显示*/
			button:hover  /*悬停*/
			{
				border-color: #0078D7;
				background-color: #fff;
			}
			
			/*鼠标按下到抬起之间的显示*/
			button:active  /*点击*/
			{
				border-color: #0078D7;
				background-color: #0078D7;
				color: #fff;
			}
			
			/*元素处理焦点时的显示*/
			button:focus
			{
				border-color:red;
				background-color: #0078D7;	
				color: #fff;
			}
			
		</style>
	</head>
	<body>
		<p>
			<button> 新建 </button>
			<button> 删除 </button>
			<button> 添加图片  </button>
			<button> 添加链接  </button> 	
		</p>
		
		<p> 
			<input type='checkbox'/> 立即重启服务器 
		</p>
	</body>
</html>

六、子选择器

子选择器 Descendant Selector

可以设定父元素下子元素的样式

子选择器示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#login-panel label
			{
				color: #444;
				padding: 6px;
				min-width: 80px;
				display: inline-block;	
				text-align: right;		
			}
			
			#login-panel input
			{
				color: blue;
				padding: 6px;
			}
			
			#login-panel .row
			{
				padding: 6px;
			}
			
			#login-panel button
			{
				width: 100px;
				padding: 6px;
				margin-left: 250px;
			}
			
		</style>
	</head>
	<body>
		<div id="login-panel">
			<div class="row">
				<label>用户名</label>
				<input type="text" /><br />
			</div>
			
			<div class="row">
				<label>密码</label>
				<input type="password" />
			</div>
			
			<div class="row">
				<button>登录</button>
			</div>
			
		</div>
	</body>
</html>

#login-panel label{}

在 id="login-panel"元素下所有<label>的样式

.xxx.yyy.zzz{}

在class="xxx"下的子元素class="yyy"下的class="zzz"

森-Js

关注

0
点赞
踩
1

收藏

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

目录一、DOM二、类选择器类选择器示例代码类选择器Class Selector*指定多个class多个class选择器，后定义的优先级高三、标签类型选择器标签类型示例代码：统一设定某种标签的样式标签与类结合使用四、ID选择器元素的IDID选择器ID选择器示例代码：五、伪类选择器伪类选择器示例代码：六、子选择器子选择器示例代码...
复制链接

扫一扫