css复合选择器

最新推荐文章于 2023-12-11 21:32:42 发布

不可爱仙女

最新推荐文章于 2023-12-11 21:32:42 发布

阅读量176

点赞数

文章标签： css

本文链接：https://blog.csdn.net/rraxx/article/details/104072355

版权

css复合选择器

交集选择器
并集选择器
后代选择器
子元素选择器
复合器练习题
属性选择器
伪元素选择器

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

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.class
交集选择器是并且的意思。即…又…的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

h3.class{color:red;font-size:25px;}

在这里插入图片描述

并集选择器

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

.class,h3{color:red;font-size:25px;}

在这里插入图片描述

后代选择器

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

.class h3{color:red;font-size:25px;}

可以使用最少三种方式
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素中的“子”指的是”亲儿子“,不包含孙子，重孙子之类。
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子集标签写在后面，中间跟一个 > 进行连接。**注意：**符号左右两侧各保留一个空格。

.class > h3{color:red;font-size:25px;}

eg:demo > h3{color:red;font-size:25px;}。说明h3一定是demo的亲儿子，demo元素必定包含h3。
在这里插入图片描述

复合器练习题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.site-r a{
			color: red;
		}
		.nav ul li a{
			color: skyblue;
		}
		.nav,.sitenav{
			font-size: 14px;
			font-family: "microsoft yahei";
		}
		.nav > ul > li > a{
			color: green;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#">公司首页</li>
			<li><a href="#">公司产品</li>
			<li><a href="#">公司简介</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>

在这里插入图片描述

属性选择器

选取标签带有某些特殊属性的选择器，我们称为属性选择器。

选择器	含义
E[attr]	存在attr属性即可
E[attr=val]	属性值完全等于val
E[attr^=val]	属性值里包含val字符且在开始位置
E[attr$=val]	属性值里包含val字符且在结束位置
E[attr*=val]	属性值里包含val字符且在任意位置

示例1，2：
在这里插入图片描述
示例3 4 5

伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

“:” 与 “::” 区别在于区分伪类和伪元素

在这里插入图片描述

不可爱仙女

关注

0
点赞
踩
0

收藏

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

css复合选择器交集选择器并集选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确，更精细的目标元素标签交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.class交集选择器是并且的意思。即…又…的意思比如： p.one 选择的是：类名为 .one 的段落...
复制链接

扫一扫