day13选择器的优先级

最新推荐文章于 2024-01-11 09:26:10 发布

℡抹來的憧憬

最新推荐文章于 2024-01-11 09:26:10 发布

阅读量188

点赞数

分类专栏：适合初学者文章标签： css html

本文链接：https://blog.csdn.net/qq_56630044/article/details/125689721

版权

适合初学者专栏收录该内容

42 篇文章 1 订阅

订阅专栏

选择器的优先级

第一级：属性后面添加!important

第二级：内联样式

优先级是看权重，权重越大，优先级越高。

通配符选择器*-----1

标签选择器------1

class选择器-------2

id选择器-------4

父子、后代、兄弟、相邻兄弟看符号之间各个选择器的权重和，但是先看符号前边的，如果前面的符号相等才比较后边的。

如果权重相等，最后写的谁，就实现谁。但是，权重不一样，但是都是修改的一个标签，不重叠的样式都能够实现。

div>span>p {
				color: red;
			}
div>.s1>p {
			color: black;
		}

像上面的例子，最终实现的效果是将颜色变为黑色，而不是红色。就是因为class选择器的优先级高于标签选择器。

伪选择器

普通选择器选择的是标签，伪类选择器是选中的标签在不同场景下的某个状态。

普通标签的状态：鼠标悬停，鼠标点击，激活（成为焦点）

常见的伪类选择器：

1.两个通用状态

hover - 鼠标悬停
active - 鼠标在某个元素上按下

2.超链接a标签特有的

link - 超链接地址没有被成功访问展示的状态
visited - 超链接地址被成功访问展示的状态

CSS常用背景属性

background-color：背景颜色

background：url（图片的地址）是否平铺 x方向 y方向位置背景颜色

是否平铺：no-repeat、repeat

x方向位置：left\right\center\x坐标值

设置超链接鼠标悬停状态：
a:hover {
color: rgba(100, 149, 237, 0.5);
}
让光标变成手指：

span:hover {
cursor: pointer;
}

超链接访问后的状态：
```
 a:link {
 		color: lightgray;
 	}
```
鼠标悬停

div:hover {
background: url(“./img/叉出去.jpg”);
}

浮动的基本用法

所谓浮动就是将该盒子浮起来，可以覆盖另一个盒子的位置。

浮动分为左浮动，右浮动（大多用来调整盒子在页面中的位置）

		.left,
			.right {
				width: 11%;
				float: left;
			}
		.left {
			/* 修改左外边距 */
			margin-left: 19%;
		}

		.middle {
			width: 600px;
			float: left;
		}
	<body>
		<!-- 顶部 -->
		<div class="d1"></div>
		<!-- 搜索栏 -->
		<div class="d2"></div>
		<!-- 分类、广告 -->
		<div class="d3">
			<!-- 分类 -->
			<div class="left"></div>
			<!-- 广告 -->
			<div class="middle"></div>
			<!-- 黄页 -->
			<div class="right"></div>
		</div>
	</body>