CSS复合选择器

最新推荐文章于 2025-04-19 22:06:22 发布
最新推荐文章于 2025-04-19 22:06:22 发布
阅读量267 收藏
点赞数 1
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012222212/article/details/84785949
版权

1.并集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p,div,h1{/*他们都是红色*/
				color:#0f0;		
			}
			
		</style>
	</head>
	<body>
		<p>香蕉</p>
		<p>橘子</p>
		<div>大白菜</div>
		<div>辣椒</div>
		<h1>米饭</h1>
		<h1>白面</h1>
		<em>我不要变色</em>
		<em>我不要变色</em>
	</body>
</html>

2.后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
   <style type="text/css">
   	 .nav ul li{
   	 	color:coral;
   	 }
   	/*要求 首页 导航 联系 颜色为红色*/
   </style>
	<body>
		
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>导航</li>
				<li>联系</li>
			</ul>	
		</div>
        <ul>
        	<li>百度</li>
        	<li>新浪</li>
        	<li>搜狐</li> 	
        </ul>
	</body>
</html>

 3.交集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.singer{
			  color: #f00;	
			}
			div.singer{
			    font-weight: 800;
			}
		</style>
	</head>
	<body>
		<div class= "singer">刘德华</div>
		<div class="singer">张学友</div>
		<p class= "singer">汪峰</p>
		<P class= "singer">韩红</P>
	</body>
</html>

4. 属性选择器

<!--
	选取标签带有特殊属性的
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a[title]{
				color: red;
			}
			
			input[type=text]{
				color: blue;
			}
		</style>
<style>
	
	
</style>
	<body>
  <a href="#" tltle="我是一个百度">百度</a>
<a href="#" title="我是一个新浪">新浪</a>
<a href="#" >搜狐</a>
<a herf="#">网易</a>
<a href="#">土豆</a>
<input type="text" />
<input type="submit"/>
<input type="reset"/>
	
	</body>
</html>

 5.属性选择器

<!--
	选取标签带有特殊属性的
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a[title]{
				color: red;
			}
			
			input[type=text]{
				color: blue;
			}
		</style>
<style>
	
	
</style>
	<body>
  <a href="#" tltle="我是一个百度">百度</a>
<a href="#" title="我是一个新浪">新浪</a>
<a href="#" >搜狐</a>
<a herf="#">网易</a>
<a href="#">土豆</a>
<input type="text" />
<input type="submit"/>
<input type="reset"/>
	
	</body>
</html>

 6.属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div[class^=font]{
				color: pink;
			}
		/*
		 * ^=表示以font开头
		 */
		 div [class$=footer]{
		 	color: pink;
		 }
		 /*
		  * $=表示以footer结尾
		  */
		 div[class*=tao]{
		 	color: green;
		 }
		 /*
		  * 
		  * *=表示任意位置
		  */
		</style>
	</head>
	<body>
		<div class="font12">属性选择器</div>
		<div class="font12">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="sub-footer">属性选择器</div>
		<div class="jd-footer">属性选择器</div>
		<div class="news-jd-nav">属性选择器</div>
		<div class="news-jd-header">属性选择器</div>
		
	</body>
</html>

 

 7.子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.item > li{
			color:crimson;
		}
		/*让一级菜单的颜色变为红色
		 > 子指的是亲儿子，孙子 重孙子 不算
		 */
		</style>
	</head>
	<body>
		 <ul class="item">
		 	 <li>一级菜单</li>
		 	      <ul>
		 	      	 <li>二级菜单</li>
		 	      	 <li>二级菜单</li>
		 	      </ul>
		 	 </li>
		 	 <li>一级菜单</li>
		 	      <ul>
		 	      	 <li>二级菜单</li>
		 	      	 <li>二级菜单</li>
		 	      </ul>
		 	 </li>
		 	 <li>一级菜单</li>
		 	      <ul>
		 	      	 <li>二级菜单</li>
		 	      	 <li>二级菜单</li>
		 	      </ul>
		 	 </li>
		 	 <li>一级菜单</li>
		 	      <ul>
		 	      	 <li>二级菜单</li>
		 	      	 <li>二级菜单</li>
		 	      </ul>
		 	 </li>	
		 </ul>
	</body>
</html>

 

 

css复合选择器
yoghurt&girl的博客
06-01 153
一、伪类选择器 1、focus伪类选择器 定义：用于选取获得焦点的表单元素；焦点就是光标，一般情况下<input>类表单元素才能获取，所以这个选择器主要针对表单元素。 语法：input：focus{样式1；样式2....} 2、链接伪类选择器 （1）a:link——选择所有未被访问的链接 （2）a:visited——选择所有已访问的链接 （3）a:hover——当鼠标移动在链接上产生的样式（最常用） （4）a:active——选择活动链接 注意：为确保有效，我们在使用过程中最好
CSS的复合选择器
2302_80195376的博客
02-02 1416
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的复合选择器可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等选择器作用特征使用情况隔开符及用法后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a子代选择器选择最近一级元素只选亲儿子较少。
CSS——复合选择器的使用
最新发布
？的博客
04-19 449
交集选择器（标签+类选择器、标签+ID选择器、类+类选择器）、并集选择器、关系选择器（后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器）的使用
CSS中2种复合选择器
王春燕的博客
04-10 521
1:交集选择器 作用：选中同时符合多个条件的元素 语法：选择器1选择器2选择器n{} 注意：若交集选择器中有元素选择器，必须使用元素选择器开头 2:并集选择器 作用：同时选择多个选择器对应的元素 语法：选择器1，选择器2，选择器3···· 例子：#b1,p,.red <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-
CSS复合选择器使用介绍
09-25
CSS复合选择器是指一组由两个或两个以上的简单选择器通过特定的组合符连接而成的选择器，它能够选择更加具体和精确的元素。在实际开发中，复合选择器的使用能够帮助开发者更有效地控制页面的样式表现。下面我们来...
css的复合选择器
w6437286的博客
03-07 1042
本章主要讲了复合选择器中常用的几种，附导航条代码。
css学习笔记易漏知识点
weixin_43226306的博客
02-25 252
在css文件中： 选择器1，选择器2，选择器3，... { 属性： 属性值； } //有逗号，这几个选择器可以理解成是 或 的关系，也就是选择器1，选择器2，选择器3等任意一个都可以应用这些样式，即选择器1，选择器2，选择器3等是同一组的。 .选择器1.选择器2 { 属性： 属性值； } //无空格隔开，选择器1和选择器2之间没有空...
css3-----复合选择器
Rushinger
10-05 666
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;复合选择器&lt;/title&gt; &lt;style type="text/css"&gt; /*交集选择器*/ li.odd{
CSS学习04：CSS的复合选择器
玉安_ZhangDe的博客
03-23 2049
1、什么是复合选择器？ 2、后代选择器★ 3、子选择器★ 4、并集选择器 5、交集选择器 6、伪类选择器
CSS-复合选择器
qq_53002037的博客
05-03 209
CSS
CSS复合选择器详解：后代与子选择器
在深入探讨CSS复合选择器之前，首先理解CSS的基础概念至关重要。CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许将样式与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值