CSS样式之复合选择器

1.交集选择器

交集选择器使用的方法是其中一个为HTML的标签,另外一个是类选择器,示例如下:

p.one  解释: p是HTML中的<p>标签 , .one 是一个类选择器的书写方式,

使用 <p class="one" > 123</p>

2.并集选择器

多个选择器用逗号分开,所有选择器都能实现后面的样式 ,示例如下:

a , p ,  .one , #id {}

3.后代选择器

外层的标签写在前面,内层标签写在后面 ,示例如下:

div p {} 解释 : div 标签中 有 p标签  比如 : <div> <p> </p> </div> 

PS:可以在前面加上类或者ID选择器, 只要标签上有该class 或者id属性 ,选择器的嵌套尽量不超过三级

4.子元素选择器

语法:  .nav > li    大于号前后用空格分开, 表示只选择第一层的子元素 ,如 .nav > li  只选择 .nav下的li元素,  li  下的 元素不选择  <ul class="nav" ><li> </li> </ul>

PS:实验发现,如果不借助 class的属性, 即父元素是类选择器, 而是使用ul 即  ul 　>　li　则会连第三层也选择上．

5.属性选择器

选择具有特殊属性的标签

如 : 1)  a[title] {}  选择 a标签中有title属性的进行样式的改变

       2)  input[type=text] {}  选择有特殊属性,并且特殊属性的值与给出值一样的进行样式改变

       3)  div[class^=font]  {}  ^= 表示以等号后面的值为开头的值的选择出来,进行css样式改变

       4)  div[class$=font]   {}   $= 表示将等号后面的值作为结尾的标签选择出来,

       5)  div[class*=tao]   {}   *= 表示将等号后面的值,有与之匹配的找出来,不管哪个位置

PS:上述的前提是有该属性的标签,并且标签中的属性的值与上述相同的值

6.伪元素选择器

语法:E::first-letter    解释: E表示标签 ,主要有以下几种:

1) E::first-letter  表示第一个单词

2) E::first-line   表示第一行

3) E::selection    选中文字后,文字的变换, 比如字体颜色的改变

4) E::before   E::after     花括号中必须有 content属性 .在盒子的内部的前面或后面放内容

简单使用: div::before { content: "a" ;}    <div> bc</div>   页面输出结果为 abc