日期:2014-05-16  浏览次数:20553 次

CSS 特殊选择符

1、子元素选择符 > :父元素 > 子元素

2、紧邻同胞选择符 + :元素1 + 元素2

      元素2 必须紧跟着元素1

3、兄弟选择符 ~ :元素1 ~ 元素2

      元素2 与元素1 同级并在元素1 之后,不一定紧跟

4、通配选择符 * :

      关于 * 有一个作用就是选择非子元素:p * a{ color: red;} 表示 p 的后代元素但非子元素中的 a

5、属性名选择器:标签名[属性名]

6、属性值选择器:标签名[属性名="属性值"]

7、链接伪类:

      a:link  /* 表示链接,用户没有任何动作 */

      a:visied /* 表示链接被用户点击过 */

      a:hover /* 表示用户的光标悬停在链接之上 */

      a:active /* 表示链接正在被点击,为释放鼠标 */

      注:这四个链接伪类必须按照这样的顺序使用,但不必全部写出。

              一个冒号(:)表示伪类,两个冒号(::)表示 CSS3 新增的伪元素,如 first-letter,first-line 等。

8、焦点伪类::focus 

9、目标伪类::target

      当用户通过链接转到页面其他的元素的时候,这个元素就是目标元素,在转过去的时候就会应用目标伪类的样式。

      这个时候目标元素的样式会在用户点击其他链接转到其他元素的时候无效。

10、子元素伪类::first-child , :last-child ,:nth-child(n)

11、::first-letter 伪元素和 ::first-line 伪元素:为第一个字或第一行添加设置样式

12、::before 伪元素和 ::after 伪元素:在特定元素前面或后面添加内容,如

         p::before{content: "insert before content";}

注:搜索引擎不会获取伪元素的内容,所以不要把重要的内容通过伪元素去添加