CSS3复杂选择器

复杂选择器：

l  兄弟选择器

• 相邻兄弟选择器：同一父元素下，指定元素的下一个兄弟元素；

  结合符是“+”；

• 通用兄弟选择器：同一父元素下，指定元素后面的所有兄弟元素；

  结合符是“~”；

l  属性选择器

• [id]:         所有声明了id属性的元素
• p[id]:        所有声明了id属性的p元素
• p[id][class]: 所有既声明id属性、同时又声明了class属性的p元素
• p[class=…]:  class属性为指定值的p元素（该元素class的值只有这一个）
• p[class ~=…]:class属性包含指定值的p元素（该元素class的值不止一个）
• p[id ^=…]:   id属性值以指定字符开始的p元素
• p[id $=…]:   id属性值以指定字符结束的p元素
• p[id *=…]:   id属性值包含指定字符串的p元素
• p[id !=…]:   id属性值不等于指定字符串的p元素

l  伪类选择器

• 更改元素的不同状态的样式

ü  :hover     鼠标移上去时的样式

ü  :active    激活时的样式

ü  :link      尚未访问过的样式

ü  :visited   访问过的样式

• 目标伪类

ü  突出显示活动的html锚，用于获取当前的目标元素

ü  语法：   :target     跳转到锚点时，该锚点的状态

ü  当元素被隐藏、激活时才显示，这是不要用<a name=””>来定义锚点，直接给目标元素id属性值，然后<a href=”# ” />指向该id属性值的目标元素

• 元素状态伪类

ü  主要用于表单，匹配元素的禁用、启用和选中状态

ü  常用的状态伪类

①　:disabled    匹配每个被禁用的元素

②　:enabled     匹配每个被启用的元素

③　:checked     匹配每个被选中的元素

• 结构伪类：从元素的层级结构来划分

ü  :first-child      匹配第一个子元素

ü  :last-child       匹配最后一个子元素

ü  :empty            匹配没有子元素、没有文本的空元素

ü  :only-child       匹配父元素的唯一子元素

• 否定伪类：匹配指定元素之外的每个元素（排除指定元素）

ü  语法:      :not( )

ü  例：input[type=text]        :type是text的input元素

               input:not([type=text] )  :type不是text的input元素

ü  例：div:first-child         :作为第一个子元素的div

           div:not(:first-child)    :同一父层元素下，除了第一个div                                          之外的所有div（平级）

l  伪元素选择器：针对元素中的文本内容进行匹配

• :first-letter     选定指定元素的首字符

例：p:first-letter{ } 多用于排版，首字符突出显示

• :first-line       选取指定元素的首行文本（网页中的首行）
• ::selection       匹配用户选取的部分