JavaWeb_CSS（7）_选择器_选择器扩展

最新推荐文章于 2022-10-09 16:21:15 发布

魏宇轩

最新推荐文章于 2022-10-09 16:21:15 发布

阅读量390

点赞数

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 选择器_选择器扩展

本文链接：https://blog.csdn.net/qq_36260974/article/details/88387591

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、关联选择器

标签的嵌套使用。相同标签中某些内容有不同显示。
需求：写一句话,我爱学习,把学习用粗体表示。针对一段话中的粗体部分添加样式：绿色,30px。

示例

CSS 文件

@CHARSET "UTF-8";
p
{
	text-align: center;	
}

p b
{
	font-size: 30px;
	color:green;
}

p b：元素中间的空格代表 p 元素内部的 b 元素。

HTML 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>选择器的扩展</h1>
		
			<hr>
			<h2>联合选择器</h2>
			<p>我爱<b>学习</b></p>	
			<b>我不喜欢学习</b>		
	</body>
	
</html>

结果图：

二、组合选择器

不同的标签显示相同的样式。
需求：我要把所有的 p 标签和 b 标签的内容都添加样式：蓝色,130px。

示例

CSS 文件
```
@CHARSET "UTF-8";
p,b
{
	font-size: 30px;
	color: red;
}
```
b,p：逗号代表两侧的元素使用当前同一个样式。

HTML 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>选择器的扩展</h1>
		
			<hr>
			<h2>联合选择器</h2>
			<p>我爱<b>学习</b></p>	
			<b>我不喜欢学习</b>		
	</body>
	
</html>

结果图:

三、伪元素选择器

其实就在 html 中预先定义好的一些选择器，称为伪元素，是 CSS 的术语。
格式：标签名：伪元素。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。

示例

CSS 文件

@CHARSET "UTF-8";
a:link
{
	color: green;
	text-decoration: none;/*下划线的有无*/
}

a:visited
{
	color: red;
	text-decoration: none;	
}

a:hover
{
	color: gray;
	text-decoration: underline;	
}

a:active
{
	color: navy;
	text-decoration: underline;	
	font-size: 30px;
}

HTML 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>选择器的扩展</h1>
			<hr>
			<h2>伪元素选择器</h2>				
			<a href="http://www.weiyuxuan.com">魏宇轩</a>	
			<a href="http://www.baidu.com">百度</a>	
			<a href="http://www.sina.com">新浪</a>		
	</body>
	
</html>