20200218web前端学习笔记

最新推荐文章于 2024-08-03 00:35:09 发布

--believe

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/qq_44850917/article/details/104378269

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.后代选择器（重点）

1.1后代选择器

概念：
后代选择器又称为包含选择器
作用：
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，先写父亲爷爷，再写儿子孙子。
父级子级 {属性：属性值；属性：属性值；}
语法：
.class h3{color:red;font-size:16px;}
当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，他能选择任何包含在内的标签

2.子元素选择器

后代选择器选择子孙后代，用空格隔开
子选择器只会选择儿子，用>隔开
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*后代选择器选择子孙后代*/
	div strong{
		color:red;
	}
	/*子选择器只会选择儿子*/

	div>strong{
		color: purple;
	}
	</style>
</head>
<body>
	<div>
	<strong>子元素选择器</strong>
	<strong>子元素选择器</strong>
	<strong>子元素选择器</strong>
	</div>
	<div>
		<p>
			<strong>子元素选择器1</strong>
			<strong>子元素选择器1</strong>
			<strong>子元素选择器1</strong>
		</p>
	</div>
</body>
</html>

3.交集选择器

条件：
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签2的特点
语法：
h3.class{color:red;}
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p.test{
		color: red;
	}
	div.test{
		color: purple;
	}
	</style>
</head>
<body>
<p class="test">啦啦啦啦</p>
<p class="test">啦啦啦啦</p>
<p class="test">啦啦啦啦</p>
<div class="test">啦啦啦啦</div>
<div class="test">啦啦啦啦</div>
<div class="test">啦啦啦啦</div>
	
</body>
</html>

4.并集选择器（重点）

应用：
如果某些选择器定义的样式相同样式，就可以利用并集选择器，可以让代码更简洁
并集选择器（css选择器分组）是各个选择器通过，连接而成的，通常用于集体声明。
语法：

在这里插入图片描述

5.链接伪类选择器（重点）

作用：
用于向某些选择器添加特殊的效果
a:link //未访问的链接
a:visited//已访问的链接
a:hover//鼠标移动到链接上
a:active//选定的链接
实际开发中写法：
一般很少写全四个状态，一般我们写法如下：


a{
	/* a是标签选择器 所有的链接 */
	font-weight:700;
	font-size:16px;
	color:gray;
}
a:hover{
	/*hover 是链接伪类选择器 鼠标经过*/
	color:red;/*鼠标经过的时候，由原来的灰色变成了红色*/
}

6.复合选择器总结

在这里插入图片描述

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20200218web前端学习笔记

1.后代选择器（重点） 1.1后代选择器概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，先写父亲爷爷，再写儿子孙子。父级子级 {属性：属性值；属性：属性值；} 语法： .class h3{color:red;font-size:16px;} 当标签发生嵌套时，内层标签就...
复制链接

扫一扫