css选择器&单位

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
  每一种颜色范围0_255(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 加透明度