【4】CSS选择器

Css关系选择器

选择器	功能
E,F	群组选择器
E F	后代选择器
E>F	子元素选择器
E+F	选取当前元素后一个兄弟元素
E~F	选取当前元素后所有的兄弟元素

属性选择器

css2中定义下面4个属性选择器

选择器	功能
E[att]	表示包含att属性的元素
E[att=”val”]	表示包含att属性并且属性值是val的元素
E[att~=”val”]	表示包含att属性并且该属性的数值的其中一个是val的元素

css3中新增的3个属性选择器

选择器	功能
E[att$=”val”]	表示包含att属性并且属性值是以val为后缀（结尾）的元素
E[att^=”val”]	表示包含att属性并且该属性的属性值是以val为前缀（开头）的
E[att*=”val”]	表示包含att属性并且该属性的数值的其中一个是val的元素

伪类选择器-动态伪类

选择器	功能
E:link	加了超链接时的样式
E:visited	访问过之后的样式
E:hover	鼠标滑过的样式
E:active	鼠标点击时的样式
E:focus	获得焦点时的样式

：nth伪类选择器

选择器	功能
E:first-child	匹配父元素的第一个子元素
E:last-child	匹配父元素的最后一个子元素
E:nth-child(n)	匹配父元素的第n个子元素
E:nth-last-child(n)	匹配父元素的倒数第n个子元素E
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素
E:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E

CSS3 伪元素选择器

选择器	功能
E::first-line	选择元素的第一行
E::first-letter	选择文本块的第一个字母
E::before	前面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动
E::after	前面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动

文字属性及段落属性

文字属性
  color 字体颜色       
  font-size 字号
  font-family   字体
  font-weight   字体加粗： bold  加粗\ normal
  font-style 字体样式 normal | italic

Css段落属性
text-indent 文本缩进 2em/24px/150% 1.5
line-height 文本行高 20px
text-align  文本对齐 left/center/right

Css样式—背景属性及项目符号

background-color:背景颜色
background-image:背景图片
background-repeat :背景重复
background-position:背景定位
Background:背景
list-style:项目符号
list-style-type项目符号类型
list-style-image项目符号图像
list-style-position项目符号图像位置 

---

note4

【基本选择器】
    *{}
    element{}
    #id{}
    .class{}

【关系选择器】
    群组选择器  #id,.class, element{css属性}
    后代选择器： 用空格表示 父元素 后代元素  (重孙子 只要是后代都改变)
    子元素选择器 用>表示  父元素>子元素 (只能找到儿子|找不到孙子）

【动态伪劣选择器】(常给a标签使用|也可以给其他)
    :link    链接时状态
    :visited 访问之后的状态
    :hover   鼠标经过时候状态
    :active  鼠标点击状态（未松开）
    爱恨原则：LoVeHAate;

【:nth选择器】（css3新增的选择器）   是伪劣选择器一种
    ：frist-child{css属性}         第一个子元素
    ：last-child{css属性}      最后一个子元素
    ：nth-child(N){ css属性}   第N个子元素   N为数字 从1开始


【css属性】
    文字属性：{可以给任何一个标签使用}
        color:#66ddff; red;( 十六进制|单词)   文字颜色
        font-size:12px;14px;16px;               文字大小
        font-family:"宋体";"" 罗马字体Tahoma,geneva,sans-serif; arial,helvetica sans-         文字字体
        font-weight:100-900/bold/bolder  normal                     文字加粗
        font-style:italic(倾斜)/normal

    段落属性：
        text-align: right|center|left                   文本水平对齐方式
        text-indent:20px 12em                           文本缩进
        line-height:20~24px;   150%    1.5/2           行高
        text-decoration:underline|none|overline|line-through(删除)        文本描述                            文本描述
        line-height高级使用，只有一行文本时，有高度，实现文本垂直方向上的对齐 line-height=height;


    背景属性：|复合属性|
        background-color:rgba();#ff00ff; red(单词少)
        background-image:url(路径)默认横纵平铺                  添加的是背景图像
        background-repeat:repeat|repeat-x|repeat-y|no-repate    默认对齐方式是左上角                              设置背景图片的显示方式
        background-position:水平位置  垂直方向的位置           背景图像的的位置
                水平方向位置：left right center   50px 20%
                垂直方向位置：top botton center 20px 25%

    列表属性：
        list-style