【CSS笔记】CSS3基础知识个人总结

一、层级选择器
    E>F        子选择器        选自匹配的F元素，且匹配的F元素所匹配的E元素的子元素
    E+F        相邻兄弟选择器        选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
        先会找到页面里面所有的E元素，看E元素后面的相邻的兄弟元素是否是F，是的话，给F添加样式
    E~F        通用选择器        选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
        先会找到页面里面所有的E元素，看E元素后面的兄弟元素是否有F，有的话，给最后所有符合要求的F添加样式

二、属性选择器
    1、E[attr]：只使用属性名，但没有确定任何属性值
    2、E[attr="value"]：指定属性名，并指定了该属性的属性值
    3、E[attr~="value"]：指定属性名，并具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的~不能省略
    4、E[attr^="value"]：指定了属性名，并且具有属性值，属性值是以value开头
    5、E[attr$="value"]指定了属性名，并且具有属性值，属性值是以value结尾
    6、E[attr*="value"]：指定了属性名，并且具有属性值，而且属性值中包含了value
    7、E[attr|="value"]：指定了属性名，并且属性值是value或者以"value-"开头的值（比如zh-cn）

三、结构性伪类选择器
    X:first-child    匹配子集的第一个元素，IE7就可以支持
        首先找到页面里面所有的X，去找它的子集中的第一个元素，去看这个元素是否符合X，是的话加上样式，不是则不加
    X:last-child    匹配父元素中最后一个X元素
        首先找到页面里面所有的X，去找它的子集中的最后一个元素，去看这个元素是否符合X，是的话加上样式，不是则不加
    X:nth-child(n)用于匹配索引值为n的子元素，索引值从1开始
        首先找到页面里面所有的X，去找它的子集中的第n个元素，去看这个元素是否符合X，是的话加上样式，不是则不加
        X:nth-child(odd)    行为奇数        odd=2n+1
        X:nth-child(even)    行为偶数        odd=2n
    X:nth-last-child(n)    从最后一个开始算索引
    X:only-child    匹配div下有且仅有一个的p
    X:first-of-type        匹配同级兄弟元素中的第一个X元素
    X:last-of-type        匹配同级兄弟元素中的最后一个X元素
    X:nth-of-type(n)    匹配同类型中的第n个同级兄弟元素X
    X:nth-last-of-type(n)     匹配同类型中的倒数第n个同级兄弟元素X
    X:only-of-type(n)    匹配同类型中位移兄弟元素的X
    X:empty    匹配没有任何子元素(包括包含文本)的元素X

目标伪类选择器
    E:target    选择匹配E的所有元素，且匹配元素被相关URL指向

UI元素状态伪类选择器
    E：enabled    匹配所有用户界面（form表单）中处于可用状态的E元素
        例：input:enabled{background:red}
    E：disenabled    匹配所有用户界面（form表单）中处于不可用状态的E元素
    E：checked    匹配所有用户界面（form表单）中处于选中状态的E元素
    E：selection    匹配E元素被用户选中或处于高亮状态的部分

否定伪类选择器
    E:not(s)    匹配所有不匹配简单选择符s的元素E

动态伪类选择器
      E:link
        链接伪类选择器
        选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

    E:visited  
        链接伪类选择器
        选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

    E:active
        用户行为选择器
        选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

    E:hover
        用户行为选择器
        选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

    E:focus 
        用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

盒子阴影
    box-shadow：    
        h-shadow（水平偏移    必填）
        v-shadow（垂直偏移    必填）
        blur（模糊距离    默认值：0）
        spread（阴影大小    默认值：0）
        color（阴影颜色    默认值：跟文字颜色相同）
        inset（往里还是往外    默认值：往外）

文本阴影
    text-shadow：
        h-shadow（水平偏移    必填）
        v-shadow（垂直偏移    必填）
        blur（模糊距离    默认值：0）
        spread（阴影大小    默认值：0）
        color（阴影颜色    默认值：跟文字颜色相同）

Word-wrap: break-word
    属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

Word-break: break-all
    它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

Background-origin 背景原点
    padding-box 背景图像填充框的相对位置
    border-box 背景图像边界框的相对位置
    content-box 背景图像的相对位置的内容框
    注：默认值为：padding-box;

Background-clip 背景裁切
    border-box 背景被裁剪到边框盒。
    padding-box 背景被裁剪到内边距框。
    content-box 背景被裁剪到内容框。
    text  背景被裁剪文字
    注：默认值：border-box;

Background-size 背景尺寸
    length
    规定背景图的大小。第一个值宽度，第二个值高度。
    Percentage(%)
    以百分比为值设置背景图大小
    cover
    把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
    contain
    把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

Border-radius 圆角边框

支持多参数
    一个参数： 四个角
    二个参数： 左上角右下角   左下角右上角
    三个参数： 左上角   左下角右上角    右下角
    四个参数： 左上角   右上角    右下角     左下角

椭圆
    border-radius: x/y;

单一方向加圆角
    border-top-left-radius: 100px 50px;