css定义选择器

最新推荐文章于 2023-05-20 00:03:24 发布
最新推荐文章于 2023-05-20 00:03:24 发布
阅读量230 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42737361
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		
		#title
		{
			color:red;
		}
		   
	</style>
	<body>
		<!-- 应用id选择器 -->
		<p id = "title">PHP100.COM中文网</p>
	</body>
</html>  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		
		/*只适合title的h2标题*/
		p#title
		{
			color:blue;
		}
		
		h2#title
		{
			color:red;
		}
		   
	</style>
	<body>
		<!-- ID与选择器结合 -->
		<h2>PHP100.COM中文网</h2>
		<h2 id = "title">Crazy工程师</h2>
		<p id = "title">胡心鹏同学--home.bigbird</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		.php
		{
			color:red;
		}
		
		   
	</style>
	<body>
		<!-- 应用类 -->
		<p class= "php">PHP100.COM中文网</p>
		<p class= "php">PHP100.COM中文网</p>
		<p class= "php">PHP100.COM中文网</p>
		<p class= "php">PHP100.COM中文网</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		ul#drinks
		{
			line-height:200%;
			color:red;
			
		}
		li.mix
		{
			font-size:20px;
		}
		li.hot
		{
			font-size:30px;
		}
		   
	</style>
	<body>
		<!-- 结合多个类和ID -->
		<ul id = "drinks">
			<li class = "mix">啤酒</li>
			<li class = "mix">可乐</li>
			<li class = "hot">红茶</li>
			<li class = "hot">绿茶</li>
		</ul>
		
		<p id = "drinks">PHP100.COM</p>
		<p class = "hot">胡心鹏 -- 魔兽争霸全国冠军(梦里面)</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		p
		{
			color:red;
			font-size:30px;
		}
		p.title
		{
			color:blue;
			font-size:40px;
		}
	</style>
	<body>
		<!-- 利用类改写样式 -->
		<p class = "title">PHP100.COM中文网</p>
		<strong class = "title">PHP100.COM中文网</strong>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	</head>
	<style type = "text/css">
		p.title
		{
			color:red;
			font-size:30px;
		}
		
	</style>
	<body>
		<!-- 直接将类链接到元素上 -->
		<p class = "title">PHP100.COM中文网</p>
		<strong class = "title">PHP100.COM中文网</strong>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		
		<link rel = "stylesheet" type = "text/css" href = "3.css"/>
		<link rel = "stylesheet" type = "text/css" href = "1.css"/>
		<link rel = "stylesheet" type = "text/css" href = "2.css"/>
	</head>
	
	<body>
		<!-- 叠层 -->
		<!-- 如果有冲突，并且优先级是一样高的，谁在最下层谁的优先级最高 -->
		<!-- 必须牢记一个规则，越晚给的规则越重要 -->
		<p class = "title">PHP100.COM中文网</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			h1,h2,h3
			{
				color:red;
				font-size:20px;
			}
			h1
			{
				font-family:Arial Black;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 分组 -->	
		<h1>PHP100.COM中文网</h1>
		<h2>PHP100.COM中文网</h2>
		<h3>PHP100.COM中文网</h3>
	</body>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				color:red;
				font-size:20px;
				font-weight:normal;
			}
			h1
			{
				font-weight:normal;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 继承 -->	
		<h1>PHP100.COM的中文网</h1>
		<i>很靠谱</i>
		<p>李炎恢老师</p>
		<span>胡心鹏同学</span>
		<div>杨金环同学</div>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定义选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			h1#php
			{
				color:red;
			}
			
			/*h1下面的i的样式是 */
			h1#php i
			{
				color:green;
				font-style:normal;
				text-decoration:underline;
			}
			
			
			h1#sina
			{
				color:blue;
			}
			
			/*h1下面的i的样式是 */
			h1#sina i
			{
				color:pink;
				font-style:normal;
				text-decoration:underline;
			}
			
			
		</style>
		
	</head>
	
	<body>
		<!-- 上下文选择器 -->
		<!-- 尽量在标签里面的标签不设定class、id -->
		<h1 id = "php">PHP100.COM<i>很靠谱</i>的中文网</h1>
		<h1 id = "sina">http://www.sina.com.cn<i>新浪网</i>,门户网</h1>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>子类选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			div.box
			{
				color:red;
			}
			div.box1
			{
				font-weight:bold;
			}
			div.box2 
			{
				font-style:italic;
			}
			div.box3
			{
				font-size:30px;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 子类选择器 -->
		<!-- 让第二个div变粗体 -->
		<div class = "box">PHP100.COM中文网</div>
		<div class = "box box1 box3">PHP100.COM中文网</div>
		<div class = "box box2">PHP100.COM中文网</div>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>其他选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			<!-- IE6、IE7没效果 -->
			input:focus
			{
				background:orange;
				border:1px solid green;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 其他选择器 --> 
		<!-- 伪类选择器 -->
		<input type = "text" />
		
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>通用选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			/*繁琐方式*/
			/*h1,h2,h3,h4,h5,p,ul,div,body,html
			{
				margin:0;
				padding:0;
			}*/
			
			*
			{
				margin:0;
				padding:0;
			}
			
		</style>
		
	</head>
	
	<body>
		<h4>PHP100.COM中文网</h4>
		<h4>PHP100.COM中文网</h4>
		<h4>PHP100.COM中文网</h4>
		<h4>PHP100.COM中文网</h4>
		
		<p>PHP100.COM中文网</p>
		<p>PHP100.COM中文网</p>
		<p>PHP100.COM中文网</p>
		
		<ul>
			<li>PHP100.COM中文网</li>
			<li>PHP100.COM中文网</li>
			<li>PHP100.COM中文网</li>
		</ul>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>高级选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			ul#nav
			{
				list-style-type:none;
				line-height:150%;
			}
			
			ul#nav ul
			{
				list-style-type:none;
			}
			
			/*如果用大于号 ul#nav下的li下的li 将不应用该样式*/
			/*只能选儿子不能选孙子*/
			ul#nav > li 
			{
				background:url("tb.gif") no-repeat left center;
				padding-left:15px;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 高级选择器 -->
		<!-- IE6不支持，IE7、火狐支持 -->
		
		<ul id = "nav">
			<li>PHP100.COM中文网</li>
			<li>
				<ul>
					<li>PHP100.COM中文网</li>
					<li>PHP100.COM中文网</li>
				</ul>
			</li>
			<li>PHP100.COM中文网</li>
		</ul>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>相邻同胞选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			h1+p
			{
				font-weight:bold;
				color:red;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 相邻同胞选择器 -->
		<!-- 尽量不要在标签里加class id-->
		<!-- IE6以下不支持 -->
		<h1>PHP100.COM</h1>
		<p>中文网</p>
		<p>很靠谱</p>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>属性选择器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			/*----------------------------------
			下面支持IE7.0以上，firefox2.0以上
			下面支持IE7.0以上，firefox2.0以上
			下面支持IE7.0以上，firefox2.0以上
			下面支持IE7.0以上，firefox2.0以上
			下面支持IE7.0以上，firefox2.0以上
			------------------------------------*/
			
			/*
				自我提示
			*/
			
			strong[title]
			{
				color:red;
				background:orange;
				display:block;
			}
			
			strong[title]:hover
			{
				border:1px dashed #333;
				background:green;
				cursor:pointer;
				display:block;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 属性选择器 -->
		<!-- IE6.0不支持 -->
		<!-- IE6.0 只支持超链接的伪类 -->
		<!-- IE7.0+ 所有标签基本都支持 -->
		<strong title = "很靠谱的PHP中文社区">PHP100.COM中文网</strong>
		
		<strong>李炎恢老师</strong>
	</body>
</html>



 

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器
jl381169437的博客
03-10 408
《精通jquery》笔记 CSS选择器分为： 核心选择器，属性选择器，关系选择器，伪元素和伪类选择器，联合选择器和反选择器 * 选择文档中所有元素 type> 选择特定类型元素 .class>
CSS 的选择器
梁甜田的博客
03-21 191
CSS 的选择器 1、元素选择器     由元素名称作为选择器，匹配页面中指定元素名称的所有标签 div{ font-size: 24px;color: red;background-color: grey } 2、类选择器     允许被页面中任意一个元素所引用 特殊用法 1、分类选择器的定义方式 ...
定义选择器
weixin_30908103的博客
10-31 115
20.1ID与类（class）1.id是唯一的，类是多项的2.id选择器： 适合所有h2标题 h2{ color：#333;font-size:16px;}只适合title的h2标题h2#title{ color：#eee；}3.结合多个class和idul#drinks{ color:red;}....
第20章 CSS定义选择器
04-10
在第20章“CSS定义选择器”中，我们将深入探讨这个主题。 首先，基础选择器是最简单和最直接的类型，包括标签选择器（如`p`）、类选择器（`.myClass`）、ID选择器（`#myID`）和通配符选择器（`*`）。标签选择器应用...
CSS教程之css选择器 、属性、值
10-30
每个CSS选择器都包含属性和值，这些定义在大括号{}内。属性是样式的一部分，描述了你想要改变的元素特性，如字体大小、颜色或背景色。例如，“color”属性用于设定文本颜色，“font-weight”用于设定字体的粗细，...
CSS中选择器的权重值的计算
12-14
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。 接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....
css 串联选择器和后代选择器介绍及示例
12-13
串联选择器和后代选择器是CSS中两种非常基础且常用的选择器类型，它们帮助开发者精确地定位到页面上的特定元素并为其设置样式。 1. **串联选择器（Combination Selector）** 串联选择器，也称为组合选择器，它将多...
css的定义以及css选择器的使用
m0_56309491的博客
02-05 447
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的基本使用</title> <style> /*1. 设置所有的 h2标签的文本为红色*/ *{ color:red; font-family: "arial black"; } /*2. 元素/标签选择器 */ div{ font-si.
CSS(一)：CSS定义和常用选择器
核桃仁先生的博客
07-16 274
目录 CSS CSS语法 选择器 1、id选择器 2、class选择器 3、标签选择器 4、后代选择器 5、分组选择器 6、通配符选择器 CSS 定义：指层叠样式表，用于设定网页中元素的显示方式 无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔； 注意 如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号..
CSS选择器介绍
cnds123的专栏
07-26 633
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。 要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义
自定义选择器
王延朕的博客
05-14 753
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义选择器</title> <style type="text/css"> /*html5自定义属性，必须用data-开头*/ /*短横匹配 |=*/ div[data-xi|="box"]{
css中的选择器
最新发布
2303_76599423的博客
05-20 1700
1 基本选择器包含以下四种选择：1.标签选择器（根据标签的名称设置对应的样式）2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）3.类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）4.通配符选择器（通过设置对应的样式）1.子代选择器（获取的某个标签的第一级子标签）2.后低选择器（获取的某个标签的所有子标签）3.分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）
简述css属性选择器的几种定义方式_CSS简介,语法,选择器分类使用,属性设置
weixin_39673051的博客
12-20 1656
1.CSS简介CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。这里要说一下 w3c标准： h...
html:(25):选择器定义和标签选择器
歌谣的博客
09-24 1050
什么是选择器？ 每一条css样式声明（定义）由两部分组成，形式如下： 选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。 <!DOCTYPE HTML> <html> <head> <meta ...
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
CSS3选择器支持情况一览
在深入探讨CSS选择器之前，我们需要理解CSS（层叠样式表）是网页设计中用于定义元素外观的关键工具。选择器是CSS的核心部分，它们允许我们精确地定位并应用样式到HTML或XML文档中的特定元素。 1. **动态伪类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值