css选择器基础
浏览器前缀
- trident内核(代表ie)—–ms-
- gecko内核(代表firebox)—–moz-
- preso内核(代表opera)—–o-
- webkit内核(代表chiome和safari)—–webkit-
属性选择器
- e【tittle】—–选择e下所有tittle属性的标签
- e【tittle=value】选择e下所有tittle=value的标签
- e【tittle^=value】选择e下所有用value开头的标签
- e【tittle$=value】选择e下所有用value结尾的标签
- e【tittle*=value】选择e下所有带有value的标签
伪类选择器
-type
- nth-of-type(1) —–遇到的第一个进行设置
- first-of-type——-遇到的首个进行设置
- last-of-type遇到的左后一个进行设置
- only-of-type只有一个的时候进行设置
child
- E:nth-child—-遇到的第几个子集进行设置
- E:first-child—-遇到的第一个子集进行设置
- E:last-child—-遇到的最后一个子集进行设置
- E:only-child—-遇到的只有一个是进行设置
其他
- :root—最高权重
- :not—-取消
- :target—当点击时
状态伪类选择器
:focus —-框会变色
:checked —–选中就会变色
::selection—-选择的会变色
:first-letter—–第一个字
:first-line—–第一行
:enabled—–允许输入
:disabled——不能输入
:read-only—–只读
:read-write—–读写
:before—–前面加东西
:after—后面加东西
其他
伪类和伪元素的区别
1. ~
div~p
2. +
div+p
3. >
div>p
text-shadow文字阴影
1. x轴偏移量
2. y轴偏移量
3. blur模糊值
4. color颜色
5. 多阴影
text-shadow { 0 0 1px red; }
text-stroke文字描边
1. w描边宽度
2. color颜色
3. 当前就webkit内核支持,需要加-webkit前缀
text-stroke { 2px red; }
text-overflow文字溢出隐藏
1. ellipsis 省略号
2. clip剪切(默认)
3. 搭配属性:
a. white-space:nowrap让文字不换行
b. overflow:hidden
4. 溢出隐藏
5. 多行文本省略号
webkit内核下多行文本省略号
6. 通用方法
css3背景属性
background-size背景尺寸
length
percentage
cover
不去管图片能不能显示完整,保证必须把盒子铺满
contain
不去管盒子是否铺满,保证必须把图片显示完整
background-origin背景位置
padding-box(默认)
border-box
content-box
background-clip背景裁切
padding-box
border-box(默认值)
content-box
多背景设置
以逗号分隔,顺序在前的,显示层级高
css3颜色属性
opacity
rgba
filter:alpha(opacity=40)
linear-gradient
线性渐变
point || angle
color
percentage
Tip:渐变是css的属性,这个属性应用在background-image身上
radial-gradient
径向渐变