版权声明：如需转载，请注明出处 https://blog.csdn.net/qq_36260974/article/details/88387591
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>
结果图：
CSS2.0样式表中文手册
提取码：qxge
如有错误，欢迎指正！