Css_2跟3

#css2中的选择器
1.元素选择器
    *通配符选择符、html类型选择符、id选择符、class选择符

2.关系选择器
    E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器)
3.伪类选择器

    E:link(链接伪类选择器-默认链接)
    E:visited(链接伪类选择器-点击过的链接)
   
E:hover(用户操作伪类选择器-鼠标滑过)
    E:active(用户操作伪类选择器-鼠标点击)
   
E:focus(用户操作伪类选择器-过去光标)
    E:lang()(:lang()伪类选择器-匹配使用特殊语言的E元素)
4.属性选择器

    E[att](选择具有att属性的E元素)
    E[att="val"](选择具有att属性且属性值等于val的E元素)

   
E[att~="val"](选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素<通俗的说属性值不唯一的时候选择>)

    E[att|="val"](选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素)
5.伪对象选择器

    E:first-letter(设置对象内的第一个字符的样式)
    E:first-line(设置对象内的第一行样式)
   
E:before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
   
E:after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)

#css3新增选择器
    1.关系选择器
       
E~F兄弟选择器(选择E标签"后面的"所有兄弟标签F)<没发现与E+F的却别>
    2.结构伪类选择器
       
E:first-child (在所有兄弟中E标签为第一个child的时候选择) = 跟 E:nth-child(1)是一样的效果
       
E:last-child (在所有兄弟中E标签为最后一个child的时候才选择)
        E:nth-child(int 第x个child)
(在所有兄弟中第x个child为E标签的时候才选择)
            E:nth-child(even) 偶数(从1开始) =
E:nth-child(2n)
            E:nth-child(odd) 奇数(从1开始) = E:nth-child(2n+1)

        E:nth-last-child(int 倒数第x个child) - 正好与E:nth-child相反
       
E:only-child    (E标签为独生子的时候才选择)

---------------------------------------------
        of-type 系列 如:
E:child-of-type 中，只对E标签类型的兄弟们加上1234..标记来选择
        E:first-of-type

        E:last-of-type
        E:only-of-type
       
E:nth-of-type()
        E:nth-last-of-type()

html:root{} 跟
html{} 效果是一样的

3.UI元素状态伪类选择器
        input:disabled
disabled类型表单的样式
        input:enabled  enabled类型表单的样式
       
input:checked  被选中表单项的样式
    4.属性选择器
        E[attr^="val"] 属性值以val开头的

        E[attr$="val"] 属性值以val结尾的
        E[attr*="val"] 属性值中存在val字符的

    5.伪对象选择器
        #以下四种虽然是"::"号，但与css以前版本的":"单冒号的效果一样    
       
E::first-line   E标签里面的第一行字符串（可以为<br />换行，也可以被容器的宽度自动换行）
       
E::first-letter E标签里面的第一个字符
       
E::before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
       
E::after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)

?

1 2 3 4 5 6 7

/* 例子         * a[href$="rar"]::after{         *  content:url(../images/rar.jpg)         * }         * #content:"也可以这样输出字符串"         * 作用：a标签的href属性为rar结尾的标签后面加上图片标签         * */

E::selection E标签中的文字被选中的时候背景颜色（默认为深蓝色） #不支持FF、支持chrome
#css3 新增属性  
   
1.css1&2中的文本属性
        text-indent     css1 文本缩进  
       
letter-spacing  css1 文字之间的间隔
        word-spacing    css1 单词之间插入的空格格数

        vertical-align  css1/css2 垂直对齐方式
        white-space     css1
空格的处理方式(对应值:normal | pre | nowrap | pre-wrap | pre-line)
       
#direction      css2 文本流方向
        #unicode-bidi   css2
用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

?

1 2 3 4 5

/*如: #b{                           direction:rtl; (将文档流变成从又向左书写)                         unicode-bidi:bidi-override;                     }             */

line-height     css1 行高
    2.css3中新增的文本属性
       
text-overflow           css3 是否使用一个省略标记(对应值:clip|ellipsis)
       
text-align              css1/css3 文本对齐方式
        text-transform         
css1/css3 文本大小写(对应值:lowercase|uppercase|capitalize)
       
text-decoration         css1/css3 [复合属性]文本装饰，如下划线、删除线
       
text-decoration-line    css3 文本装饰线条的位置
        text-decoration-color   css3
文本装饰线条的颜色
        text-decoration-style   css3 文本装饰线条的形状
       
text-shadow             css3
文本文字阴影及模糊效果(对应值:（left,top[,模糊程度px][,rgba(r,g,b,透明度)|rgb(r,g,b)|#000000]）) -
可以用","逗号来分隔继续写一样的格式来多阴影效果
        text-fill-color         css3 文字填充颜色
#需要加浏览器私有前缀 如：-webkit-text-fill-color:red;
        text-stroke            
css3 [复合属性]文本文字的描边 #需要加浏览器私有前缀 如：-webkit-text-stroke:1px red;
       
text-stroke-width       css3 文本文字描边的粗细 #需要加浏览器私有前缀
如：-webkit-text-stroke-width:1px;
        text-stroke-color       css3
文本文字描边的颜色 #需要加浏览器私有前缀 如：-webkit-text-stroke-width:red;

?

1 2 3 4 5 6

/* 浏览器私有前缀          * IE:-ms-          * 谷歌、苹果、猎豹、360急速(webkit内核)：-webkit-          * opera:-o-          * firefox:-Gecko-          * */

tab-size               css3 制表符(tab键)的长度 #<pre>标签里面的时候才可以看到效果
(tab-size:30) 谷歌浏览器暂不支持加px像素
        word-wrap               css3
当前行超过指定容器的边界时是否断开转行(对应值:normal | break-word)
#一般英文单词之类的中间没有空格的字符一长串下来不会自动换行，而会超出限制宽度，所以用word-wrap:break-word;样式来强制换行
   
3.css3新增颜色表示方式
        rgba(r,g,b,alpha<0-1>)
        HSL(H,S,L) -
色轮模式
            H: Hue(色调)
               
0(或者360)表示红色,120表示绿色,240表示蓝色。颜色取值范围为:0-360
            S: Saturation(饱和度)

                取值范围: 0.0%-100.0%
            L:Lightness(亮度)

                取值范围: 0.0%-100.0%
            #如：hsl(360,50%,50%) 为不纯的红色

        HSLA(H,S,L,A)
            A: ALPHA(透明度)
               
取值范围:0-1
        Opacity
            opacity:0.3;#取值为0-1之间

            filter:alpha(opacity) 仅限IE#取值为0-100之间 - 为了兼容IE浏览器