属性选择符:
选择符的目的:选择标签对标签做css样式渲染 通过html属性,对html标签做选择
1,选择符[属性]{css样式} 说明:只要带有当前属性就会被选中
2,选择符[属性:”属性值”]{css样式} 说明:指定属性名也必须指定属性值则匹配成功
3,选择符[属性~=”属性值”]{属性值} 说明:当前属性值是一个以空格隔开的‘词列表’只要包含当前指定的属性值则匹配成功
4,选择符[属性^=”属性值”]{css样式} 说明:当前属性值是以当前字符开头的就会匹配成功,不需要空格
5,选择符[属性$=”属性值”]{css样式}
6,选择符[属性*=”属性值”]{css样式} 说明:属性值只要包含当前指定的字符 则匹配成功
7,选择符[属性/=”属性值”]{css样式} 说明:属性值如果是以指定属性一开头的则匹配成功,仅是一个单词的时候只要开头是就行
结构伪类选择符:
元素:first-child{css样式} 选择当前“子集”第一个
元素:last-child{css样式} 选择当前子集最后一个
元素:nth-child(第几个){css样式} 选择当前子集第几个
元素:nth-last-child{css样式} 选择当前子集倒数第几个
元素:only-child{css样式} 当前子集只有一个的时候则被选中
类型选择把child换成 of-type
注:如果子集都是同类标签用child 如果子集不是同类标签用 of-type
结构伪类:
:root{css样式 } 选择根标签-html
:empty{css样式} 当前元素没有任何内容才会被选中
目标伪类:
元素:target{css样式} 当前元素被相关超链接指向执行的样式
动态伪类:
:focus 聚焦时候做的css样式
层级选择器:
1,父元素>子元素 说明:选中父元素最近的一层子元素(不包括孙子辈的元素)
2,兄弟元素+兄弟元素 说明:选择当前元素下面最近的一个兄弟元素
3,兄弟元素~兄弟元素 说明:选择当前元素下面所有兄弟元素
状态伪类:
input:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
input:disabled 处于不可用状态的E元素
checked+(元素)(兄弟元素才行) 处于选中状态的E元素
selection 处于部分高亮显示状态的元素
P::selection 只能改变背景颜色和字体颜色
文本阴影:
text-shadow:X Y 阴影大小 颜色
多阴影设置
text-shadow:x(大小) y(颜色) , x(大小) y(颜色);
Box-shadow 盒子阴影
box-shadow:10px 10px 20px 0px gray
x y z 大小 颜色
文本换行处理:
浏览器默认对英文或数字的换行处理 如果放不下,会尝试把长单词换到下一行 但是如果在下一行仍然超出则不会换行处理:
word-wrap:break-word; 说明:如果放不下长单词,首先把长单词换到下一行显示,如果把长单词仍然超出则会断句
word-break:break-all; 说明:不会尝试把长单词换到下一行,而是直接在单词内部断句
背景图:
1,背景图的起始位置
background-origin:;
属性值:
(默认位置) padding-box padding区域开始
border-box border区域开始
content:box 内容区域开始
2,背景的裁切(背景图/背景色)
background-clip:;
padding-box padding 区域开始
(默认值)border-box 边框区域开始
content-box 内容区域开始
3,背景图的大小
background-size:;
属性值:高度 宽度(都要存在)
100% 100%
100px 100px
cover 背景图等比放大铺满
contain 等比放大当宽或者高达到最大则停止
4,多背景设置:
background:url(),url();
background:color;