CSS选择器Selector

最新推荐文章于 2024-09-20 00:08:39 发布
最新推荐文章于 2024-09-20 00:08:39 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Java【洗髓】 网页基础 CSS 文章标签： CSS 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjs935219/article/details/99172113
版权

目录

一、DOM

二、类选择器

类选择器示例代码

类选择器Class Selector

*指定多个class

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

三、标签类型选择器

标签类型示例代码：

统一设定某种标签的样式

标签与类结合使用

四、ID选择器

元素的ID

ID选择器

ID选择器示例代码：

五、伪类选择器

伪类选择器示例代码：

 六、子选择器

子选择器示例代码：

一、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
关注
专栏目录
CSS-Selector---下篇
wbj_code_life的博客
10-23 343
选择语法联合使用 CSS selector的另一个强大之处在于： 选择语法 可以联合使用 打开这个网址http://f.python3.vip/webauto/sample1.html 比如， 我们要选择 网页 html 中的元素<span class='copyright'>版权</span> <div id='bottom'> &lt...
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
css选择器权重介绍
spider_man
10-27 277
选择器与伪元素的权重情况：高权重的选择会覆盖低权重的展示样式 选择器 表达式或示例 说明 权重 行内选择器 style="" 1000 id选择器 #aaa 100 类选择器 .aaa 10 标签选择器 h1 元素的tagname 1 属性选择器 img[alt]、div[class^='pus'] 10 相邻选择器 selecter...
CSS的三种基本选择器
最新发布
qq_74861982的博客
09-20 674
CSS的三种基本选择器
css selector什么意思
keke795的博客
02-09 419
css selector指的是css选择器，是用来匹配网页中的dom元素的，常用选择器可分为标签名选择器、类选择器、id选择器、派生选择器、子元素选择器、分组选择器和伪元素选择器。 推荐：《css视频教程》 css selector指的是css 选择器，是用来匹配网页中的dom元素的，css样式的定义为：选择器{样式}。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页
CSS selector
weixin_30279671的博客
07-10 114
1, html tag h1 {color:blue} 2, id #para1{text-align:center;color:red} 3, class .center {text-align:center} 转载于:https://www.cnblogs.com/datasci/archive/2009/10/29/1592423.html
CSS选择器（selector）
戈文文的博客
02-10 2459
目录1. 通用选择器（universal selector）2. 元素选择器（type selectors）3. 类选择器（class selectors）4. id选择器（id selectors）5. 属性选择器（attribute selectors）6. 组合（combinators）7. 伪类（pseudo-classes）8. 伪元素（pseudo-elements） 1. 通用选择器...
复制Css选择器「Copy Css Selector」-crx插件
03-09
扩展开发工具和上下文菜单，添加...用鼠标右键单击元素并选择复制Css选择器菜单项到缓冲区，所以您可以将复制的选择器复制到任何文本编辑器。 对于快速获取选择器来测试框架（如Selenium）非常有用。 支持语言:English
Selector 选择器 CSS
qq_51308613的博客
09-13 672
Java web CSS选择器使用类型
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
css中选择器(selector)
JiangJunDriver的博客
01-15 1728
常用选择器最常用的选择器类型时类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落或标题元素，只需指定希望特定类型的元素，比如段落或标题元素，只需要指定希望应用样式的额元素的名称。来兴选择器有时候也称为元素选择器或者简单选择器。p{color : black;} h1{font-weight:bold;}后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表
css selector
米菲的泰迪
02-21 399
调试： F12-console-document.querySelector(css表达式) 特殊字符： . class # id &gt; 层级 样例： &lt;span class="xxx"...  &lt;input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplet
css selector简介
热门推荐
tenfyguo的技术专栏
08-01 1万+
一.Tag selector标签selecor ,也可以称为类型selector，它将对HTML页面中所有的该类型有效。h1 {    font-family:Arial,sans-serif;    color:#CCCCFF;}表示所有h1标签都适用该CSS的rule，当然为了缩短代码，适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如DIV,H1 {}二.Class Selector类选择器和HTML中的class相结合，应用到所有声明了该class的标签中。类选择器必须要
CSS Selector
ReZero's Blog
08-25 664
https://flukeout.github.io/
Css Selector
天上白玉京 十二楼五城
07-22 209
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute ...
css选择器(selector) xPath的选择器
09-25
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记,今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定
css selectors CSS选择器
Abudula__的博客
12-31 303
CSS selectors css selectors are used to select the html elements you want to style. there are four types of selectors. simple selectors(select elements based on name, id, class) Combinator selectors(select elements based on a specific relationship between
CSS常见的选择器
Welisit的博客
08-01 458
常用的伪元素有:before、::before:after、::after为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值