CSS选择器
- 元素选择器 根据标签
<style>
p{ }<style>
- id选择器 唯一标识id=“dex”
<style>
#dex{ }</style>
- class选择器 可多个class class=“ii abc”
<style>
.ii{ }<style>
- 通配选择器
<style>
*{ }<style>
(全选) - 复合选择器 1.交集选择器 一一排列 p.ii{ }
2.选择器分组 并集选择器 h1,span{ } - 关系选择器
子元素选择器 父元素 > 子元素 { }
后代选择器(范围较大) 父元素 子元素 { }
兄弟选择器 子元素 + 子元素(紧挨着上一个子元素的){ }
子元素 ~ 子元素(下面所有子元素){ }
父元素里唯一的子元素 父元素 子元素:only-child{ } - 属性选择器 p[属性名=属性值]{ }
p[属性名^=属性值]{ }(选择属性值以指定值开头的元素)
p[属性名$=属性值]{ }(选择属性值以指定值结尾的元素)
p[属性名*=属性值]{ }(选择属性值含有指定值的元素)
伪类选择器
- 第一个子元素 ul>li:first-child{ }
- 最后一个子元素 ul>li:last-child{ }
- 第n个子元素 ul>li:nth-child( ){ } 括号里填数字 (特殊值 n 0~正无穷 2n或even 偶数位元素 2n+1或odd 奇数位元素)
- 同类型中第一个子元素(li)ul>li:first-of-type{ }
- 同类型中最后一个子元素(li)ul>li:last-of-type{ }
- 同类型中第n个子元素(li)ul>li:nth-of-type( ){ }
- 同类型中有唯一子元素(li) ul li:only-of-type{ }
- 同类型中无子元素 ul:empty
- 否定伪类 :not( )将符合条件的元素从选择器中去除
伪类超链接
- a:link{ }(没访问过的) a:visited{ }(访问过的 只能改颜色) 只适用于a
- :hover{ }(鼠标移入) :active{ }(鼠标点击)
伪元素选择器
- ::first-letter{ }(标签首字母)
- ::first-line{ }(便签首行)
- ::selection{ }(鼠标选中)
- ::before{ }(元素起始)
- ::after{ }(元素结尾)
选择器冲突
- 样式冲突:通过不同选择器选择相同的元素 修改相同样式为不同结果
- 选择器的权重(优先级):
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级 - 比较优先级时,需要将所有选择器的优先级进行相加运算,最后优先级越高,越优先显示
- 优先级相等时应用靠后的选择器样式
- 可以在某一样式后边添加 !important 此时该样式会获得最高优先级
单位
长度单位
- 像素(屏幕实际上由一个个小点构成 像素越小屏幕显示效果越清晰)
- 百分比 可以设置为属性相对于父元素属性的百分比 可以使子元素跟随父元素的改变而改变
- em 相当于元素的字体大小来计算 1 em = 1 font-size
- rem 相对于根元素的字体大小来计算
颜色单位
- 可以直接使用的颜色名
- RGB值(光的三原色) 通过三种颜色不同浓度调配出不同的颜色
R red G green B blue
每一种颜色范围0255(0%100%)之间
语法: RGB(红色,绿色,蓝色) - RGBA 在RGB基础上增加A表示不透明度 需要四个值 前三个和RGB一样 第四个表示不透明度 1表示完全不透明 0表示完全透明 .5表示半透明
- 16进制RGB值 语法:#红色绿色蓝色(00~ff)
如果颜色两位两位重复 可以简写 - HSL H 色相(0~360) S 饱和度(0% ~100%) L 亮度(0%~100%)
HSLA 加透明度