CSS复合选择器

最新推荐文章于 2024-01-31 16:02:33 发布

_wjl_

最新推荐文章于 2024-01-31 16:02:33 发布

阅读量337

点赞数

分类专栏： web前端文章标签： CSS元素选择器

本文链接：https://blog.csdn.net/abc_123_linbin/article/details/90347435

版权

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--交集选择器</title>
	<style>
      .company {
      	color: #f00;
      }
      div.company {   /* 交集选择器 */
      	font-weight: 700;
      }
	</style>
</head>
<body>
	
</body>
<div class="company">阿里巴巴</div>
<div class="company">tencent</div>
<p class="company">华为</p>
<p class="company">baidu</p>
</html>

在这里插入图片描述

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--并集选择器</title>
	<style>
      /* p {
       	color :#f00;
       }
       div {
       	color :#f00;
       }
       h1 {
       	color :#f00;
       }*/

       p,div,h1,.changeColor {
       	color: #0f0;
       }
	</style>
</head>
<body>
  <!--  要求 1、他们颜色都是红色 -->
	<p>苹果</p>
	<p>橘子</p>
	<div>大白菜</div>
	<div>胡萝卜</div>
	<h1>米饭</h1>
	<h1>馒头</h1>

	<em class="changeColor">我也要变色</em>
	<em>我不要变色</em>
	<em>我不要变色</em>
</body>
</html>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--后代选择器</title>
	<style>
      /*  div ul li {
      	color: #f00;
      } */
      .nav ul li {
      	color: #0f0;
      }
	</style>
</head>
<body>
   <!-- 要求：
      1.首页 导航 联系 颜色为红色 

    -->
	<div class="nav">
		<ul>
			<li>首页</li>
			<li>导航</li>
			<li>联系</li>
		</ul>
	</div>

	<div >
	  <ul>
		<li>百度</li>
		<li>新浪</li>
		<li>搜狐</li>
	   </ul>
	</div>
</body>
</html>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--子元素选择器</title>
	<style>
        /*  li {
        	color: #f00;
        } */
        .item li { /* 后代选择器 */
        	color: #f00;
        }
        /* 子元素选择器 */
        .item >li {
        	color: #0f0;
        }
	</style>
</head>
<body>
   <!-- 要求：
     1.一级菜单的颜色变为红色 
     子元素选择器 子 指的是 亲儿子  孙子 重孙子 不算
    -->
	<ul class="item">
		<li>一级菜单
           <ul>
           	   <li>二级菜单</li>
           	   <li>二级菜单</li>
           </ul>
		</li>

		<li>一级菜单
           <ul>
           	   <li>二级菜单</li>
           	   <li>二级菜单</li>
           </ul>
		</li>

		<li>一级菜单
           <ul>
           	   <li>二级菜单</li>
           	   <li>二级菜单</li>
           </ul>
		</li>
	</ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--选择器案例</title>
	<style>
        .site-r a {
        	color: red;
        }

        .nav ul li a {
        	color: skyblue;
        }

        .nav ,.sitenav {
        	/*font-size: 14px;
        	font-family: "microsoft yahie";*/
        	font :14px "microsoft yahei";
        }

        .nav>ul>li>a {
        	color: green;
        }
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li> <a href="">公司首页</a> </li>
			<li><a href="">公司简介</a></li>
			<li><a href="">公司产品</a></li>
			<li>
			  <a href="">联系我们</a>
			  <ul>
			  	<li><a href="">公司邮箱</a></li>
			  	<li><a href="">公司电话</a></li>
			  </ul>
			</li>
		</ul>
	</div>

	<!--侧导航栏-->
	<div class="sitenav">
		<div class="site-l">左侧侧导航栏</div>
		<div class="site-r"><a href="">登录</a></div>
	</div>
</body>
</html>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
2

收藏

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

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。<!DOCTYPE html><html lang="en"><head> <meta chars...
复制链接

扫一扫