HTML学习记录4-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_89223879/article/details/144309583

Day5

01-复合选择器

后代选择器：某个元素的所有后代元素父选择器子选择器{}

子代选择器：某个元素下面子代元素（最近的子集）

父类选择器>子代选择器{ }

并集选择器：一次性选中多个标签，多个选择器之间用，隔开

交集选择器：选中同时满足多个条件的标签，并且选择器之间没有任何的间隔和符号

*{} 会选中所有标签同时优先级最低

02-伪类选择器

:hover 鼠标悬停时

.box:hover{
		color: pink;
		font-size: 20px;
}

a:link{} 超链接访问之前有目的地的链接（即不只是一个具名锚点）

a:link{
		color: red;
	}

a:visited：已访问过（存在于浏览器历史记录中）的链接

 a:visited{
		color: aquamarine;
	}

a:active：激活（如点击）的链接

a:active{

	}

遵循顺序：LVHA

:focus 聚焦状态

当鼠标移动到a链接上时div发生变化则使用

a:hover+.box{
		color: red;
	}

03-伪类

input:checked{}

input:disabled{}

div:empty #所有的没有子元素的div标签

:nth-child()

p:nth-child(3) 子集的第三个

ul li:nth-child(4)

ul li:first-child

ul li:last-child

ul li:nth-child(2n-1)

ul li:nth-child(2n)

p:nth-of-type(1)

p:first-of-type:

:last-of-type

04-属性选择器

属性选择器：标签[属性=属性值]

具有name属性的input标签：input[name]{}

input[type=passwd]{}

input[type^=e]{ } type属性值中包含e的input标签

input[type$=ch]{ } type属性值是以ch结尾的input标签

05-其他选择器

兄+弟：紧挨着兄标签的下一个弟标签,并且必须具有相同的父元素

p+div{
			color: red;
		}

兄~弟选取兄弟元素后面所有的相同元素，要求：不必紧紧跟随并且使用同一个父元素

p~div{
			color: aqua;
		}

06-伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div::before{
			content: "nanhang";
			color: pink;
			font-size: 20px;
			
		}

		div::after{
			content: "----1010";
		}

		div::selection{
			color: red;
		}
		
	</style>
</head>
<body>
	<div>张三cdcdmkcmkdkkkkk</div>
	<div>李四</div>
	<div>王五</div>

</body>
</html>

07-css的特性

1、继承性 :子集默认继承父亲的文字相关属性存在默认样式的标签，会继承失败

2、层叠性：相同的属性,后面设置的css属性会覆盖前面设置的css属性 .不同的属性，css样式都会生效

3、优先级：同一个元素，指定了多种选择器，优先级的问题就会产生。选择器不同是，要通过计算优先级决定执行谁设置的css

继承而来的属性或*： 0，0，0，0

标签选择器： 0，0，0，1

类选择器，伪类选择器 0，0，1，0

id 0，1，0，0

行内样式 1，0，0，0

！important 无穷大

从左向右去比较

四组数字之间不会进行进位

.box ul li 0,0,1,0+0,0,0,1+0,0,0,1=0,0,1,2

ul li 0,0,0,1=0,0,0,1=0,0,0,2

07-emment写法

标签名.类型：

标签名#id名：

div+p：

<p></p>

div>p：

<ul>

</ul>

3span span*3：<span></span><span></span><span></span>

ul>li*8:

<!-- <ul>

</ul> -->

div{内容}:

08-背景相关属性

height: 3000px;

background-color: pink;

背景图片默认背景图片是进行平铺的

background-image: url(../../day2/image/test.jpeg);

background-repeat: no-repeat;

background-position: 水平方向的位置（数值为正数，表示向右）垂直方向的位置（数值为正数，表示向下）;

background-position: 100px 200px;

left right center top bottom

background-position: right top;

background-position: center center;

背景图片的缩放

background-size: contain;

background-size: cover;

背景图片固定背景不会随着元素的滚动而滚动

background-attachment: fixed;

background:背景的复合属性不区分顺序

background:pink url(../../day2/image/test.jpeg) no-repeat fixed;

09-阴影属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: pink;
			/* box-shadow: x轴的偏移量 Y轴的偏移量 */
			box-shadow: 10px 10px 10px #00FF00;

			text-shadow: 12px 2px 2px #FF0000;
		}
	</style>
</head>
<body>
	<div>南航</div>
	
</body>
</html>