Css选择器
选择器
（1）优先级的原则
- 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
- 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)
- 继承的优先级：制定样式的优先级大于继承样式的优先级
- 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级
- 最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小
按 CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
# css简介
1.css (cascading style sheets) 层叠样式表
2.css 作用就是专门修饰网页页面样式的(修饰html标签)
3.css和html比较优劣
---html 加style属性,太长、太乱、不好维护、复用性差,优势是单独对该标签进行渲染,优先级比较高
---css 利用"选择器"找到元素或一类元素进行渲染.复用性高、便于维护、框架能用、更美观
4.语法规范
---利用选择器查找到元素,从而进行渲染
---渲染是使用样式列表一句一句渲染元素
选择器{样式列表;}每一句样式结束需要在最后加分号表示接束;
5.使用方式(在那用？怎么用？)
---在标签内使用style属性<div style="color:red;">叫做"内联样式"</div>
---在<head>标签内创建一个专门写样式的<style>标签,在该标签内使用:选择器{样式列表;}的语法书写css,叫做"内部样式",内部样式还是存在于当前的html中.优先级低于内联样式,只能在当前页面使用.优先级低于内联样式,只能在当前页面使用.
---在<head>标签内,创建一个<link href="外部的css文件" rel="样式文件 stylesheet">标签与内部相同,选择器{样式列表;}叫做"外部样式",外部样式的复用性较高
# 控制台的使用
1.打开控制台的方式(右键->检查->Elements)
2.界面介绍见图
3.控制台作用:调试代码,临时修改
4.要求,css样式不出、出错,优先看控制台
# 选择器
1.作用是在页面上找元素,和html有关
基础选择器:元素选择器直接使用标签的名字当作选择器 例:h1{样式列表;}
当元素过多,又需要不同样式,元素选择器就无法达到
2.通用选择器(通配符选择器):选择所有的页面元素 *{样式列表;}
优先级很低,一般用于样式的最顶端,修饰所有的元素可能共有的样式,效率低
3.id选择器
需要渲染的标签中要有id属性,因为id的唯一性,使用id当选择器只能渲染该元素
#元素的id值{样式列表;}
可以直接渲染元素,但复用性差,不建议样式渲染使用id选择器
4.类选择器
部分元素需要相同样式,可使用class类属性将相同样式的元素,给予相同的类名
.类名{样式列表;}
class类的值可以是多个,所以类选择器常用于css样式的选择器,便于分类复用性高
5.群组选择器:
多个选择器使用相同的一组属性样式,可以将多个选择器用逗号连接,给予同一组样式
选择器1,选择器2,选择器n{样式列表;}
优势:既减少选择器的创建,又可以完成相同效果
6.关系型选择器
后代选择器:祖先元素中子元素或者其元素后代,该标签包裹的都是它的后代元素
祖先选择器:后代选择器{样式列表;}(多个选择器之间要是后代关系,并且用空格连接)
优势:减少创建类名,越多越细致的层级书写,优先级越高
7.子代选择器
可以找到元素的"直接"子集,就是找到直接的子元素不包括后代元素
父元素选择器>子元素选择器{样式列表;}
优势:更加精准高效
8.兄弟选择器
它可以选中当前元素的后面的相关兄弟元素
当前元素选择器~后面的兄弟元素的选择器{样式列表;}
缺点:效率太低,多个元素会被反复渲染
9.相邻兄弟选择器
它可以选中当前元素后"紧紧挨着"的元素,被选中更直接
当前元素选择器+相邻兄弟的选择器{样式列表;}
优势:比兄弟选择器高效一些
10.伪类选择器
a激活前的样式 a:link{样式列表;} 它会覆盖a应继承的颜色样式
a激活中的样式 元素选择器:active{样式列表;} 元素被鼠标点击,不松开鼠标样式
a激活后的样式 a:visited{样式列表:} a特有的
# 鼠标悬停元素(最常用) 元素的选择器:hover{样式列表;} 鼠标在元素上悬停,元素产生的样式
伪类选择器特点:和用户产生交互,状态的改变时才会触发
# 重要用法:元素状态改变时,改变自己或者其他元素的样式
11.伪元素选择器
伪元素并不是元素,而是在标签前部分加入某些内容,并对这些内容进行样式的修饰
"::"和":"是为了区分伪类和伪元素,大多数浏览器支持这两种表现形式
::before 和 ::after必须加content属性,即使什么都不写也要加
在标签前创建一个伪元素:当前元素的选择器::before{content:"伪元素的内容";样式列表}
12.优先级
优先级原则
顺序读取的优先级:相同权重值的选择器,相同的属性,不同的值
指定大于继承的优先级:当元素具有指定样式的时候,就不再继承祖先元素的样式
最高优先级!important:在属性值后加一个空格输入!important可以直接获取最高优先级
权重值的比较
内联样式的权重 1000
id选择器的权重 100
class内选择器权重 10
元素标签选择器权重 1
权重值可以累加
css引用的比重
内联样式>内部样式和外部样式
内部样式和外部样式的比重取决于书写位置的顺序
浙公网安备 33010602011771号