2.2.5伪类 2.2.6 CSS选择符命名规范 2.2.7 选择符扩展*（CSS）

最新推荐文章于 2024-07-19 15:50:46 发布

池布旁

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量57

点赞数

分类专栏： CSS层叠样式表文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_63692368/article/details/123048287

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.2.5伪类

这里是引用在这里插入图片描述

用于修饰a标签的一些状态
a:link{ color:red;}

以上4个伪类的在CSS中的书写顺序
L(未访问)-V(已访问)-H(鼠标移动到链接)-A(鼠标按下链接)
text-decoration
none ----没有任何效果
Underline 默认属性表示下划线
Overline 上划线
Line-through 贯穿线

	a:link{
		color: black;
	}

	a:visited{
		color: gold;
	}

	a:hover{
		color: red;
		text-decoration:underline;/* text-decoration;  none ----没有任何效果; Underline 默认属性 表示下划线; Overline  上划线; Line-through 贯穿线;*/

	}

	a:active{
		color: pink;
	}

2.2.6 CSS选择符命名规范
好的命名规范可以增加代码的可读性。
id=”qq123”; 不符合规范
能够望文生义
驼峰命名法：除第一个单词首字母小写外，其余所有单词首字母都大写#headerBlock
帕斯卡命名法：与驼峰相似，区别都是所有单词首字母都大写#HeaderBlock
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀#head_block

2.2.7 选择符扩展

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	body,h1,ul,li{
		text-decoration: none;
		list-style: none;
	}/*分组选择符：
        body,h1,a{
		text-decoration:none;
	            }      将一系列的标签选择符用逗号间隔来描述共同的样式*/

	a{
		text-decoration:overline;  /*none：没有下划线*/
	}

	a:link{
		color: black;
	}

	a:visited{
		color: gold;
	}

	a:hover{
		color: red;
		text-decoration:underline;/* text-decoration;  none ----没有任何效果; Underline 默认属性 表示下划线; Overline  上划线; Line-through 贯穿线;*/

	}
`
	a:active{
		color: pink;
	}

	h1{
		background-color: #ccc;
	}

	h1:hover{
		background-color: yellow;
	}

	h1#content{
		background-color: blue;
	}

	h1#content:hover{
		background-color: green;
	}/*标签指定式选择符
   <h1 id=”content”><h1>   h1#content{}  id为content的h1标签*/

	</style>  <!--以上4个伪类的在CSS中的书写顺序    L(未访问)-V(已访问)-H(鼠标移动到链接)-A(鼠标按下链接)   -->
</head>
<body>
<h1>QQ空间</h1>
<h1 id="content">QQ空间2</h1>
	<a href="https://www.baidu.com/">我的主页</a>
	<a href="https://www.taobao.com/">我的相册</a>
	<a href="#C3">我的日志</a>
	<a href="#C4">我的留言板</a>
	<u>
		<li>11111</li>
		<li>222222</li>
		<li>33333</li>
	</u>
</body>
</html>

<!--包含选择符： 嵌套和派生 也就是指标签和标签之间具备嵌套关系
<body>
  <div>
   <p></p>
</div>
</body>  包含选择符 标识  是空格

div p{
}     标识的含义是div中的p标签

组合选择符：
就是将以上的所有的选择符用在一起就叫做组合选择符
例：
h1.p1,h1#content{}  表示class为p1的h1标签和id为content的h1标签 -->
<!--逗号分隔:表示并列关系，二者之间并没有什么关系 
    空格分隔：表示从属包含关系，是当前的元素子元素才会出现效果，即父子关系
    连写：表示当前元素需要同时具备才会出现效果-->

组合选择符：
就是将以上的所有的选择符用在一起就叫做组合选择符
例：
h1.p1,h1#content{} 表示class为p1的h1标签和id为content的h1标签
逗号分隔:表示并列关系，二者之间并没有什么关系
空格分隔：表示从属包含关系，是当前的元素子元素才会出现效果，即父子关系
连写：表示当前元素需要同时具备才会出现效果-