CSS3选择器&属性整理
图片在WPS里无法粘贴
元素选择器
①属性选择器
| E {...} |
对所有E元素起作用 |
| E[attr] {...} |
对所有具有arrt属性的E元素起作用 |
| E[attr=value] {...} |
对所有具有arrt属性且值为value的E元素起作用 |
| E[attr^=”value”] {...} |
对所有具有arrt属性且值以value开头的E元素起作用 |
| E[attr$=”value”] {...} |
对所有具有arrt属性且值以value结尾的E元素起作用 |
| E[attr*=”value”] {...} |
对所有具有arrt属性且值包含value的E元素起作用 |
示例：
/*对所有div元素起作用*/
div {
width:100px;
height:100px;
}
/*对所具有name属性的div元素起作用*/
div[name] { }
/*对所有具有name属性且值为test的div元素起作用*/
div[name=”test”] { }
/*对所有具有name属性且值以test开头的div元素起作用*/
div[name^=”test”] { }
/*对所有具有name属性且值以test结尾的div元素起作用*/
div[name$=”test”] { }
/*对所有具有name属性且值包含test的div元素起作用*/
div[name*=”test”] { }
②ID选择器
| #idValue {...} |
对id值为idValue的元素起作用 |
| E#idValue {...} |
对id值为idValue的E元素起作用 |
示例代码：
/*对id值为user的元素起作用*/
#user { }
/*对id值为user的input元素起作用*/
Input#user { }
③class选择器
| .myClass {...} |
对所有class属性值为myClass的元素起作用 |
| E.myClass {...} |
对所有class属性值为myClass的E元素起作用 |
示例代码：
/*对所有class属性值为myClass的元素起作用*/
#user { }
/*对id值为user的input元素起作用*/
input#user { }
④关系选择器
- 包含选择器：A B(A和B是前三者的选择器)
例如：div .user 对在div内部并且class=”user”的元素起作用
- 子选择器：A>B(A和B是前三者的选择器)
例如：div>.user 对在div的子元素并且class=”user”的元素起作用
- 兄弟选择器：A~B(A和B是前三者的选择器)
例如：#abc~ .user 对和id=”abc”的元素的后面兄弟元素中class=”user”的元素起作用
说明：多个选择器组合用,隔开A,B,C {...}
p,#abc,.aaa:匹配id=”abc”,class=”aaa”的p元素
⑤伪元素选择器
| 格式 |
示例 |
解释 |
| :first-letter |
div:first-letter #abc:first-letter |
只对选择的元素对象的第一个字符起作用 |
| :first-line |
.test:first-line #abc~ .user:first-line |
只对选择的元素对象的第一行起作用 |
| :after :before |
|
我不常用，以后再解释 |
⑥伪类选择器
| :frist-child |
匹配其父元素第一个子节点 |
| :last-child |
匹配其父元素最后一个子节点 |
| :nth-child(n) |
匹配其父元素第n个子节点 |
| :nth-last-child(n) |
匹配其父元素倒数第n个子节点 |
| :first-of-type |
匹配其父元素中与自身同类型同级别第一个子节点 |
| :last-of-type |
匹配其父元素中与自身同类型同级别最后一个子节点 |
| :nth-of-type(n) |
匹配其父元素中与自身同类型同级别第n个子节点 |
| :nth-last-of-type(n) |
匹配其父元素中与自身同类型同级别倒数第n个子节点 |
示例代码：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type=”text/css”>
p#abc:frist-child {...}/*匹配第一个元素 */
Div .div1:frist-child {...}/*匹配第一个元素 */
p#abc:nth-child(3) {...}/*匹配第三个元素 */
p#abc:nth-last-of-type(3) {...}/*匹配第四个元素 */
Div .div1:last-of-type {...}/*匹配第六个元素 */
</style>
<body>
<div>
<p>第一个元素</p>
<p id=”abc”>第二个元素</p>
<div class=”div1”>第三个元素</div>
<p>第四个元素</p>
<p>第五个元素</p>
<div >第六个元素</div >
<p>第七个元素</p>
</div>
</body>
</html>
| nth-child(odd/event) |
匹配其父元素所有奇数/偶数子节点 |
| nth-last-child(odd/event) |
匹配其父元素倒数开始的所有奇数/偶数子节点 |
| nth-child(xn+y) |
匹配其父元素所有xn+y子节点 |
| nth-last-child(xn+y) |
匹配其父元素倒数开始的所有xn+y子节点 |
| nth-of-type(odd/event) |
匹配其父元素中与自身同类型同级别的所有奇数/偶数子节点 |
| nth-last-of-type(odd/event) |
匹配其父元素中与自身同类型同级别的所有倒数开始的奇数/偶数子节点 |
| nth-of-type(xn+y) |
匹配其父元素中与自身同类型同级别的所有xn+y子节点 |
| nth-last-of-type(xn+y) |
匹配其父元素中与自身同类型同级别的所有倒数开始的xn+y子节点 |
⑦UI元素状态伪类选择器
| :link |
未被访问过的元素（通常指链接） |
| :visited |
已被访问过的元素（通常指链接） |
| :active |
鼠标点击到释放之间的状态的元素 |
| :hover |
鼠标放在上面的元素 |
| ::selection |
被选中的内容 |
CSS属性
字体相关属性
| 属性 |
属性值 |
介绍 |
| color |
|
字体颜色 |
| font-family |
|
设置文本字体 |
|
font-size |
xx-small x-small small medium large x-large xx-large |
最小字体 较小字体 小字体 正常字体 大字体 较大字体 最大字体 |
|
font-stretch |
narrower normal wider |
横向拉伸文字 正常 横向压缩文字 |
|
font-style |
normal italic oblique |
正常 斜体字体 倾斜字体 |
|
font-weight |
lighter normal bold bolder
|
更细 正常 加粗 更粗 或者用100、200、300...控制字体加粗程度 |
|
text-decoration |
none blink underline line-through overline |
无修饰 字体闪烁 下画线修饰 中画线修饰 上画线修饰 |
|
font-variant |
normal small-caps |
文本大小写字母格式： 正常 小型大写字母字体 |
|
text-transform |
none capitalice uppercase lowercase |
文本大小写转换 不转换 首字母大写 全大写 全小写 |
| line-height |
n pt/px |
字体行高（负值为阴影效果） |
| letter-spacing |
n pt/px |
字符之间的距离 |
| word-spacing |
n pt/px |
单词之间间距 |
| text-shadow |
|
字体阴影 |
text-shadow:xoffset yoffset radius color;
举例：text-shadow：5px -5px 2px gray;
其中四个属性值如表所示
| xoffset |
横向偏移（左为负右为正） |
| yoffse |
纵向偏移（上为正下为负） |
| radius |
阴影模糊半径，越大越模糊 |
| color |
阴影颜色 |
CSS3支持的颜色表示方法有很多，最常见的有颜色名、十六进制颜色值、rgb(r,g,b)颜色表
字体颜色属性参照博客：https://www.cnblogs.com/5H5H/p/9784015.html
文本相关属性
| 属性 |
属性值 |
介绍 |
| text-indent |
n pt/px |
段落文本缩进 |
|
text-overflow |
clip ellipsis |
当元素指定overflow:hidden文本溢出处理方式 简单剪切溢出文字 简单剪切溢出文字并显示溢出标记（...） |
|
vertical-align （比较难） |
auto baseline sub supper top middle bottom length |
目标组件内部垂直对其方式 对元素文本内容自动对齐 （默认值）支持valign文本内容与基线对齐 元素内容与文本下标对齐 元素内容与文本上标对齐 支持valign文本内容与元素顶端对齐 支持valign文本内容与元素中间对齐 支持valign文本内容与元素底端对齐 指定文本相对基线偏移距离，可用百分比
|
|
text-align |
left right center justify |
元素内部文本对齐方式 左对齐 右对齐 居中对齐 两端对齐 |
|
direction |
ltr rtl |
元素内部文本流入方式 从左向右 从右向左 |
|
word-break |
normal keep-all break-all |
浏览器方式 只能在半角空格或连字符处换行 允许在单词中间换行 |
背景相关属性
| background-attachment |
scroll：背景图片随组件内容滚动 fixed：背景图片固定 |
| background-color |
背景颜色 |
| background-image |
背景图片 url(“图片地址”) |
| background-clip |
背景覆盖范围（见详解1） |
|
background-origin |
背景覆盖起点 border：边框区 padding：内补丁区 content：内容区 |
| background-size |
图片背景大小（宽度和高度） |
详解1
background-clip：背景覆盖范围，有如下四个属性
| border-box no-clip |
指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content) |
| padding-box |
指定背景覆盖内补丁区(padding)、内容区(content) |
| content-box |
指定背景覆盖内容区(content) |
边框相关属性
| border-(top/right/bottom/left)-color |
边框颜色 |
| border-(top/right/bottom/left)-style |
边框风格 |
| border-(top/right/bottom/left)-width |
边框线宽 |
边框风格的属性值：
| none |
无边框 |
| hidden |
隐藏边框 |
| dotted |
电线边框 |
| dashed |
虚线边框 |
| solid |
实线边框 |
| double |
双线边框 |
| groove |
3D凹槽边框 |
| ridge |
3D凸槽边框 |
| inset |
3D凹入边框 |
| outset |
3D凸出边框 |
特殊边框属性：
①渐变边框：
border-(top/right/bottom/left)-colors:#555 #666...;
用多种颜色值来实现边框渐变效果
②圆角边框：
border-radius：四角圆角
border-top-left-radius：上左圆角，其他三个角类似
③图片边框:
border-image-source:url(“”);
border-image-slice:apx bpx cpx dpx;
border-image-slice属性如图所示把图片切割成9个部分，舍弃中间的一块，上下左右的四块成为边框上下左右四块，图片四个角成为边框四个角。
④内补丁属性：
padding-top/right/bottom/left:apx bpx cpx dpx;
上右下左内补丁距离
⑤外补丁属性：
margin-top/right/bottom/left:apx bpx cpx dpx;
上右下左外补丁距离
大小相关属性
| height： max-height： min-height |
高度 限高最大 限高最小 |
| width: max-width: min-width: |
宽度 限宽最大 限宽最小 |
|
box-size |
content-box:宽高对内容区生效 padding-box:宽高对内补丁区+内容区生效（只有Firefox支持） border-box：宽高对边框+内补丁区+内容区生效 |
|
resize |
对所有设置overflow属性的HTML组件有效 none：不允许拖动改变大小 both：允许拖动改变组件宽度和高度 horizontal：允许拖动改变组件宽度 vertical：允许拖动改变组件高度 inherit：继承父元素的resize值 |
定位相关属性
|
position |
absolute 漂浮于页面之上 relative 目标对象参照前一个对象定位 static 目标对象以页面为参考系 |
| z-index |
值越大，越漂浮于上层 |
| top/right/borrom/left |
对最近一个有定位的父对象的上/右/下/左偏移 |
布局相关属性
| float |
向left/right浮动 |
| clear |
none不清除浮动 清除left/right/both的浮动 |
| clip |
auto 不剪切 rect(A,B,C,D)如下图方式剪切HTML元素 |
|
overflow-(x/y) |
水平/垂直方向 visible 不剪切内容，不添加滚动条 auto 自动添加滚动条 hidden自动剪切 scroll总是显示滚动条 |
白色(可视区域)为剪切之后的部分，如果A,B,C,D其中的值是auto，即长度为0。
多栏布局
目前各版本浏览器还未统一，需要加入前缀
| column-width |
每个栏目宽度 |
column |
| column-count |
栏目数 |
|
| column-rule-width |
栏目之间分隔条的宽度 |
column-rule |
| column-rule-style |
栏目分隔条线型（属性值与border一样） |
|
| column-rule-color |
分隔线颜色 |
|
| column-gap |
栏目之间间隔 |
|
|
column-fill |
栏目高度 auto 随内容多少自动 balance和内容最多一栏一样 |
|
表格相关属性
| border-collapse |
控制两个表格边框是否合并 seperate分开，即双线 collapse合并，即单线 |
| border-spacing |
当border-collapse为seperate时，设置双线距离 |
| caption-side |
表格标题位于表格top/right/bottom/left |
| empty-cells |
当border-collapse为seperate时,单元格内容为空时是否显示边框，show显示，hide隐藏 |
| table-layout |
auto默认布局 fixed固定布局 |
当表格布局为table-layout=fixed时可以在<table>标签里加<col.../>标签，<col.../>标签代表每列。
①如果设置多个<col.../>标签，则表格宽度等于所有标签宽度总和。
②如果设置一个<col.../>标签，则每列宽度都是和第一列一样，也就是和<col.../>标签的宽度属性一样
③如果没有设置标签，则平分表格。
列表相关属性
| list-style-image |
列表项标记图片 |
| list-style-position |
列表标记位置 outside列表元素之外 inside列表元素之内 |
|
list-style-type |
decimal阿拉伯数字 disc实心圆 circle空心圆 square实心方块 还有很多用的不多，看图。。。 |
控制光标属性
cursor属性值(用的不多，看图)