CSS学习5

乌鸦不像写字台

已于 2024-08-30 15:42:20 修改

阅读量441

点赞数 2

分类专栏： css学习文章标签： css

于 2024-08-30 15:32:58 首次发布

本文链接：https://blog.csdn.net/qq_54641174/article/details/141688177

版权

css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

复合选择器

前言
一、交集选择器
二、并集选择器
三、后代选择器
四、子元素选择器
五、属性选择器
六、伪元素选择器（css3）

前言

复合选择器是由两个或多个基础选择器组成的。

一、交集选择器

由两个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。
使用较少，不建议。

<html>
	<head>
		<style>
			.red {
				color: red;
			}
			p.red {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div class="red">12</div>
		<p class="red">234</p>
	</body>
</html>

二、并集选择器

如果样式完全相同或者部分相同，使用并集选择器集体声明。
并集选择器，和的意思，用逗号隔开，所有选择器执行后面的样式。

<html>
	<head>
		<style>
			div,
			p {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div>12</div>
		<p>234</p>
		<h1>78</h1>
	</body>
</html>

三、后代选择器

外层标签写外面，内层标签写里面。

<html>
	<head>
		<style>
			div p {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>12</p> <!--只改变这一行-->
		</div>
		<p>234</p>
	</body>
</html>

四、子元素选择器

<html>
	<head>
		<style>
			.nav li { /*空格 选择儿子、孙子、重孙子*/
				font-size: 12px;
			}
			.nav > li { /*大于号 只选择亲儿子*/
				color: pink;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>一级菜单
				<ul>
					<li>二级菜单 </li>
				</ul>
			</li>
		</ul>
	</body>
</html>

五、属性选择器

选择标签带有特殊属性的选择器。
用中括号表示[]

a[title]
a[title=“123”]
div[class^=font]表示font开头
div[class$=footer]表示footer结尾
div[class*=tao]表示任意位置含有tao

<html>
	<head>
		<style>
			a[title] {
				color: red;
			}
		</style>
	</head>
	<body>
		<a title="123">qwe</a>
		<a></a>
	</body>
</html>

六、伪元素选择器（css3）

E::first-letter 选择第一个字
E::first-line 选择第一行
E::selection 选中文字时候的变化样式

<html>
	<head>
		<style>
			/*.demo 类选择器
			:first-child 伪类选择器
			:first-letter 伪元素选择器*/
			p::first-letter {
				font-size: 50px;
			}
			p::first-line {
				color: green;
			}
			p::selection {
				color: pink;
			}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>

在内部前面或者内部后面插入。

E::before
E::after

<html>
	<head>
		<style>
			div::before {
				content: "我";
			}
			div::after {
				content: "18岁";
			}
		</style>
	</head>
	<body>
		<div>今年</div>
	</body>
</html>