选择器的权重及几种组合方式

最新推荐文章于 2024-03-02 17:15:20 发布

潇潇雨歇~

最新推荐文章于 2024-03-02 17:15:20 发布

阅读量1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lan128lan/article/details/108400474

版权

1.选择器的权重

	选 择 器   --------- 权重

!importent ------------infinity
行间样式 ------------- 1000
id ----------------------- 100
class | 属性 | 伪类 — 10
标签 | 伪元素 ---------- 1
通配符 ------------------ 0

补充说明

1.属性

<style type="text/css">
[title]
// 或者[title = "W3School"]
{
color:red;
}
</style>
<body>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
</body>

2.伪类：用于向某些选择器**添加**特殊的效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200904112738914.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbjEyOGxhbg==,size_16,color_FFFFFF,t_70#pic_center)

3.伪元素：用于向某些选择器**设置**特殊效果。

h1:before
  {
  content:url(logo.gif);
  }

2. 选择器的组合方式

1）.class1 .class2

	后代选择器。class1下的class2

2) .class1.class2

	同时拥有两者选择器。

3) .class1 > .class2

	子代选择器、下一级选择器。

4) .class1 + .class2

	邻居选择器。
	选择所有紧接着.class1之后的.class2元素

5) .class1 ~ .class2

	同级别 后面所有的所有选择器。

潇潇雨歇~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
选择器的权重及几种组合方式

1.选择器的权重选择器 --------- 权重!importent ------------infinity行间样式 ------------- 1000id ----------------------- 100class | 属性 | 伪类 — 10标签 | 伪元素 ---------- 1通配符 ------------------ 0补充说明1.属性<style type="text/css">[title]// 或者[title = "W3S
复制链接

扫一扫