标签选择器

通过标签的名字,修改css样式
div{ width: 200px; height: 300xp; }
通配符选择器

*选择页面中所有的元素
* { margin: 0; padding: 0; }
一级子元素选择器

选择某个父元素的直接子元素

后代选择器是选择父元素的所有子孙元素,一级子元素原则只选择第一级子元素,不会再向下查找元素
.box > p { background-color: red; }
id选择器

通过id查找页面中唯一的标签,用#表示id
#dada { width: 200px; height: 200px; }
class选择器

通过特定的class来查找页面中对应的标签
.box{ width: 200px; height: 300px; } <div class="box"></div>
伪类选择器

:hover鼠标移入某个元素
.box:hover { color: red; }
:before在某个元素的前面插入内容
div:before { content: '-dadaqianduan'; background-color: yellow; color: red; }
:afer在某个元素的后面插入内容
div:after{ content: '-dadaqianduan'; color: red; }
群组选择器

* 可以对多个不同的选择器设置相同的样式 .box, .box1, .box2 { width: 200px; height: 300px; }
选择器的优先级

当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。

通过测算那个选择器的权重值最高,应用哪一个选择器的样式

权重计算方式

* 标签选择器:1
* class选择器:10
* id选择器:100
* 行内样式:1000
* !important最高级别,提高样式权重,拥有最高级别
注意:

如果两个选择器的权重值一样高,应用距离对象最近的css样式

技术
©2019-2020 Toolsou All rights reserved,
过拟合和欠拟合的形象解释2021 美赛时间安排表Springboot之JPA常用查询方法中国月球车“月兔二号”在月球发现一块奇怪岩石PS制作登录界面C语言程序设计课程设计 之《学生成绩管理系统》消息质量平台系列文章|全链路排查篇年薪20万属于什么水平?答案让人扎心!王者荣耀背景故事整合Jsp+Ajax+Servlet+Mysql实现增删改查(一)