css选择器介绍和权重解析

什么是css？

官方解释：

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

在开发网页的时候控制样式。可以非常精确的修饰页面布局，包括但不限于：字体、字体颜色、背景颜色、边框、渐变、过渡、动画等等。

css选择器：

我们要给某个元素添加样式，首先要选中它，这时候就要使用选择器了。

1.类选择器：

又称class选择器，因为在标签上要用class自定义属性值，使用的时候用 "." 代替。语法：

.content{color:red}

2.ID选择器：

跟类选择器不同的是，它具有唯一性，也就是说这个id只能在同一个页面中存在一次。一般用于元素特定的样式，语法：

.box{color:red}

3.标签选择器：

html由各种标签组成，而被标签选择器选定的标签会添加对应的样式，如：div，p，body，html。语法：

p{color:red}

4.后代选择器：

后代选择器匹配所有符合要求的后代，通俗的说可以匹配到儿子，孙子，重孙，重重孙...... 中间用空格隔开，最终选中目标元素，选中的可能是一个或多个元素，语法：

ul li{color:red}

5.子选择器：

子选择器匹配某个元素的下一级，也就是说只能匹配儿子，不能匹配孙子重孙......语法：

div>p{color:red}

6.伪类选择器：

有时候我们需要css来实现一些视觉上的特效。伪类元素可以实现

选择器	说明	语法
hover	鼠标悬浮	a：hover
visited	被点过的链接	a：visited
link	没被点过的链接	a：link
active	鼠标按下	a:active
focus	获取焦点的表单	input：focus
enabled	启用的表单（默认）	input：enabled
disabled	禁用的表单	input：disabled
checked	被选中的表单	input：checked
root	根元素（html）	：root
not（p）	不是p的所有元素	：p
empty	没有子节点的元素（含空格）	p：empty
lang（en）	属性为lang值为en	：lang（en）

7.通用选择器：

选定所有html标签，用*号表示，一般在开头定义

*{
    margin:0;
    padding:0;
    list_style:none;
}

8.群组选择器：

多个元素属性一致的时候，可以用群组选择器，不同元素的选择方式使用逗号隔开

.content,#box,div{
    color:#ccc
}

9.属性选择器： 

顾名思义，也就是匹配所有指定标签的指定属性，比如：

a[href="https://mp.youkuaiyun.com"] {color: red;}

10.伪元素选择器： 

 

11.行内样式：

标签内部的style属性，比较特殊，不算选择器

<div style="width:100px;height:100px;background:red;"></div>

css权重

这么多种选择器，假如一个元素被不同的选择器给了同样的样式，用哪个呢？

这时候就不得不提到权重了，规则优先用权重高的样式，如果两个权重一样，后执行的样式会覆盖之前的。

选择器
！important	10000
行内样式（style）	1000
id	100
class，伪类选择器，属性选择器	10
标签选择器，伪元素选择器	1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）......	0

 

完。

 

各位看官有问题可以评论区或发邮件一起探讨，个人邮箱：dingjie0730mi@163.com