css小结

CSS小结（选择器+css属性）

1. css选择器

• element>element 选择器用于选择特定父元素。

　　　　例如div>p，‘>’指向最直接的子元素，不能选取隔代子元素。

• [attribute] 选择器用于选择所有带有该属性的元素。

　　　　例如a[target]{ background-color:yellow;}  选择所有带有target属性的<a>标签。

• :first-child 择器匹配其父元素中的第一个子元素。

　　　　例如p:first-child{background-color:yellow;}  选择 <p> 的父元素的第一个元素，如果第一个元素不是<p>，就选不中。

• :before  选择器向选定的元素前插入内容(:after选择器同理)

　　　　例如p:before{content:"Read this "}  在所有<p>元素的前面加一句Read this

• element~element 选择器用于选择同一父元素下出现在 element1 后面的 element2。

　　　　例如p~ul{background-color:yellow;}  选择同一父元素下在<p>后的所有<ul>标签。

• :nth-child(odd)  选择器用来选择父元素中的奇数子元素。
• :nth-child(even)  选择器用来选择父元素中的偶数子元素。
• :nth-child(2)  选择器用来选择父元素中第二个子元素。
• :last-child  选择器用来匹配父元素中最后一个子元素。如果被选标签不是最后一个子元素，则不能被选中。
• :root选择器用匹配文档的根元素。
• ::selection选择器匹配元素中被用户选中或处于高亮状态的部分。

　　2.项目中用到的部分css属性总结

• border-radius  为元素添加圆角边框
• border  定义元素的边框样式，主要是语法要记住。border:1px solid red;
• text-align  指定元素文本的水平对齐方式。
• background-color  指定背景颜色。常用值有transparent（背景色为透明）、inherit（从父元素继承背景色）、#颜色等。
• font-family  指定文本字体
• font-size  设置字体大小
• font-weight  设置字体粗细。常用值有normal、bold(粗字体)、bolder(更粗的字体)、lighter(更细的字体)、inherit(从父元素继承字体粗细)
• white-space  指定元素内的空白怎样处理。常用值有nowrap（文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止）、pre-wrap（保留空白符序列，但是正常地进行换行）等。
• resize  指定一个元素是否是由用户调整大小的。常用值有both（用户可以调节宽度和高度）、none（用户不可以调节宽度和高度）、horizontal（用户可以调节宽度）、vertical（用户可以调节高度）。
• text-overflow  指定当文本溢出包含它的元素，应该发生什么。常用值有clip（修剪文本）、ellipsis（显示省略符号来代表被修剪的文本）、string（使用给定的字符串来代表被修剪的文本，但是只在 Firefox 浏览器下有效）。
• opacity  指定透明度级别。可以从0设置到1，0为完全透明，1为完全不透明。
• float  指定一个盒子（元素）是否应该浮动。常用值有left、right、none、inherit。绝对定位的元素忽略float属性！
• max-height 属性设置元素的最大高度。
• cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。可取值见菜鸟教程css属性手册。
• display 属性规定元素应该生成的框的类型。常用的有none（此元素不会被显示）、block（此元素将显示为块级元素，此元素前后会带有换行符）。