css修改select选择框option被选中的背景颜⾊_CSS学习笔记1
CSS
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显⽰ HTML 元素，多个样式定义可层叠为⼀，外部样式表通过<link>标签进⾏引⼊
1、<link>标签
定义⽂档与外部资源的关系，如链接样式表
存在于 head 部分
rel属性，规定当前⽂档与被链接⽂档之间的关系，stylesheet表⽰⽂档的外部样式表
href属性，规定被链接⽂档的位置
2、CSS基本语法
<style>标签代码⾥要符合CSS语法规则
注释/* */
CSS 规则由选择器和声明块构成，选择器负责选中元素，每条声明由⼀个属性和⼀个值组成，（：连接 ；结尾）
3、常⽤选择器
选择器练习⼩游戏f lukeout.github.io
（1）、元素选择器（标签名选择器）
根据标签名来选定指定的元素，标签名{}
（2）、ID选择器
根据元素的id属性值选中⼀个元素，#id属性值{}
类选择器
（3）、类选择器
根据元素的class属性值选中⼀组元素，.class属性值{}
可以同时为⼀个元素指定多个class属性值，空格隔开
（4）、通配选择器
选中页⾯中的所有元素，*{}
（5）、交集选择器
选中同时符合多个条件的元素，选择器1选择器2...选择器n{}，以元素选择器开头
（6）、并集选择器
同时选中多个选择器对应的元素，选择器1，选择器2,...，选择器n{}
（7）、⼦元素选择器
选中指定⽗元素的指定⼦元素，⽗元素>⼦元素{}
（8）、后代选择器
选中指定元素内的指定后代元素，祖先 后代{}
（9）、兄弟选择器
‘+’选择器，两个标签相邻（紧挨）时，可以对后⼀个标签进⾏样式修改，是单个的‘~’选择器，某元素后所有同级的指定元素，是所有的
（10）、属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
4、伪类选择器
伪类⽤来描述⼀个元素的特殊状态，⽐如：第⼀个⼦元素、被点击的元素、⿏标移⼊的元素（1）、 :first-child 第⼀个⼦元素
（2）、 :last-child 最后⼀个⼦元素
（3）、 :nth-child() 选中第n个⼦元素
特殊值：n 第n个 n的范围0到正⽆穷
2n或even 表⽰选中偶数位的元素
2n+1或odd 表⽰选中奇数位的元素
（1）（2）（3）这些伪类都是根据所有的⼦元素进⾏排序
（4）、:first-of-type :last-of-type :nth-of-type()在同类型元素中进⾏排序
（5）、:not() 否定伪类，将符合条件的元素从选择器中去除
（6）超链接的伪类
a:link ⽤来表⽰没访问过的链接
a:visited ⽤来表⽰访问过的链接，由于隐私的原因，只能修改链接的颜⾊
:hover ⽤来表⽰⿏标移⼊的状态
:
active ⽤来表⽰⿏标点击
cssclass属性
（7）、伪元素
::first-letter 表⽰第⼀个字母
::first-line 表⽰第⼀⾏
::selection 表⽰选中的内容
::before 在元素之前添加内容，结合content属性使⽤
::after 在元素之后添加内容，结合content属性使⽤
5、选择器优先级
内联样式 1，0，0，0
id 选择器 0，1，0，0
类选择器 0，0，1，0
元素选择器 0，0，0，1
统配选择器 0，0，0，0
继承的样式 没有优先级
⽐较优先级时，将所有的选择器的优先级进⾏相加计算，最后优先级越⾼，则越优先显⽰（分组选择器是单独计算的），如果计算值相同，则采⽤最后⼀个选择器。在样式的后边添加!important，则为最⾼优先级。
6、长度单位
像素 单位px
百分⽐ 将属性值设置为相对于其⽗元素属性的百分⽐
em 1em=1 font-size 相对于元素的字体⼤⼩
rem 相对于根元素(html元素）的字体⼤⼩
7、颜⾊单位
RGB值：每⼀种颜⾊的范围在0-255（0%-100%）之间，RGB（红⾊，绿⾊，蓝⾊）
RGBA A表⽰不透明度，1表⽰完全不透明，0表⽰完全透明，.5半透明
⼗六进制的RGB值，颜⾊浓度00-ff，如果颜⾊两位重复可以简写 #aabbcc --> #abc
HSL值，H⾊相(0-360)；S饱和度，颜⾊的浓度0%-100%；L亮度，颜⾊的亮度0%-100%
8、盒⼦模型
CSS将页⾯中的所有元素都设置为了⼀个矩形的盒⼦，由内容区(content)、内边距(padding)、边框(border）、外边距(margin)
内容区
元素中所有的⼦元素和⽂本内容都在内容区中排列，内容区的⼤⼩由width和height两个属性来设置
边框
边框属于盒⼦边缘，边框的⼤⼩会影响到整个盒⼦的⼤⼩，边框的三个样式，宽度border-width、颜⾊border-color、样式border-style
border-width⽤来指定上右下左四个⽅向的边框的宽度值，未赋予值的满⾜上下相等，左右相等
border-color⽤来指定边框的颜⾊，可以分别指定四个边框边的颜⾊，如省略不写则⾃动使⽤color的颜⾊值
border-style指定边框的样式，默认值none，表⽰没有边框；solid实线、dotted点状虚线、dashed虚线、double双线
border-xxx-width、border-xxx-color、border-xxx-style（xxx可以是top right bottom left）⽤来单独指定某⼀个边的宽度border简写属性，可以同时设置边框所有的相关样式，并且没有顺序要求
border
内边距
元素的内边距在边框和内容区之间，上内边距padding-top、右内边距padding-right、下内边距padding-bottom、左内边距padding-left
⼀个盒⼦的可见框⼤⼩由内容区、内边距和边框共同决定
背景颜⾊会延伸到内边距上
padding 简写属性可以在⼀个声明中设置所有内边距属性
外边距
外边距不会影响盒⼦可见框的⼤⼩，会影响盒⼦的位置
margin-top上外边距，如设置⼀个正值，元素会向下移动
margin-right右外边距，默认情况下⽆效果，往往由浏览器⾃动调整
margin-bottom下外边距，如为正值，其下边的元素会向下移动
margin-left左外边距，如为正值，元素向右移动
margin如果是负值，则会向相反的⽅向移动
浏览器默认从左向右渲染，元素是从左向右排列的，所以默认情况下设置左和上外边距会移动元素⾃⾝，⽽设置下和右外边距会移动其他元素
margin 简写属性可以在⼀个声明中设置所有外边距属性
9、布局
⽔平布局
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其⽗元素内容区的宽度
如不满⾜上式，且没有值为auto的情况，则浏览器会⾃动调整margin-right值
如果width、margin-left、margin-right中某个值为auto，则⾃动调整该值
如果width为auto和⼀个（两个）外边距为auto，则宽度会调整到最⼤，设置为auto的外边距会⾃动为0
如果两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值，可利⽤这⼀特性使⼀个元素在其⽗元素中⽔平居中
垂直布局
⼦元素是在⽗元素的内容区中排列的，如果⼦元素的⼤⼩超过了⽗元素，则⼦元素会从⽗元素中溢出，这时可设置overflow属性来处理溢出的元素
visible 默认值，⼦元素会从⽗元素中溢出，在⽗元素外部的位置显⽰
hidden 溢出内容将会被裁剪不会显⽰
scroll ⽣成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要⽣成滚动条
overflow-x、overflow-y可单独控制某⼀⽅向

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。