关于css的一些总结
属性选择器
1.x[xxx]{xx：xx} 选择含有xxx属性x元素 例如：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p[class]{color: #f00;} </style> </head> <body> <p class="abc">哈哈哈哈</p> <p class="ab-cab">哈哈哈哈</p> <p class="aaccbb">哈哈哈哈</p> <p class="abcabc">哈哈哈哈</p> <p class="cba">哈哈哈哈</p> <p class="a-bca">哈哈哈哈</p> <p id="d 2ca">哈哈哈哈</p> <p id="dy ac">哈哈哈哈</p>
</body> </html>
2.x[x="y"]{xxx:xx} 选择属性x的值是y的x元素 例如
p[class="abc"]{color: #f00;}
3.x[x^="y"]{xxx:xxx} 选择属性x的值开头是y的x元素 例如
p[class^="ab"]{color: #f00;}
4.x[x$="y"]{xx:xxx} 选择属性x的值结尾是y的元素x 例如
p[class$="a"]{color: #f00;}
5.x[x*="y"]{xxx:xxx} 选择属性x的值含有y的元素x 例如
p[class*="bc"]{color: #f00;}
6.x[x~="y"]{xxx:xx} 选择属性x的值开头是y接着就是空格的x元素 例如
p[id~="d"]{color: #f00;}
7.x[x|="a"]{xxx:xx} 选择属性x的值开头是y接着就是-的的x元素 例如
p[class|="a"]{color: #f00;}
伪对象选择符
E::first-letter 选择E元素的第一个字符 例如
p[class*="a"]::first-letter{color: #f00;}
E::first-line 选择E元素的文本的第一段落 例如
p[class*="a"]::first-line{color: #f00;}
E::before
E:after/E::after
E::placeholder 选择E元素的占位符（要加上前缀 比如input::-webkit-input-placeholder{color:#f00}）
E::selection 选择被选中E元素（ 就是拉拽选中的那种 也是最好也是加上前缀）
字体样式（font）
缩写：font{（非必要：style，weight，variant等）size/(非必要：line-height) family}
font-style ：字体样式 比如斜体(italic)
font-weight:粗细 比如粗体（bold）
font-variant:大写设置 比如小型大写（small-caps）
font-size:字体大小 比如16px
font-family:字体名称 比如宋体
line-height:行高 比如22px
text-decoration：文本装饰线条 比如下划线
color：字体颜色 比如red
text-shadow: 文字阴影 比如2px（x轴偏移） 2px（y轴偏移） #f00（颜色）;
元素样式
width:宽度 比如90%（是父元素的90%）
height:高度 比如100px
margin：外边距 比如0 auto（外边距是0且居中）
padding：内边距 比如5px
以上属性的缩写是{上 右 下 左}或{上 下 左右}又或者{上下 左右}和{上下左右}
