0
点赞
收藏
分享

微信扫一扫

CSS学习5

认真的老去 2024-09-03 阅读 37
css

复合选择器

前言

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


一、交集选择器

  1. 由两个选择器构成,第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。

  2. 使用较少,不建议。

<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>

二、并集选择器

  1. 如果样式完全相同或者部分相同,使用并集选择器集体声明。
  2. 并集选择器,和的意思,用逗号隔开,所有选择器执行后面的样式。
<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>

五、属性选择器

  1. 选择标签带有特殊属性的选择器。
  2. 用中括号表示[]
  • 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>
举报

相关推荐

0 条评论