CSS基础选择器复习

前端三层

• HTML (HyperText Markup Language)

超文本标记语言

从语义的角度描述页面结构。

• CSS (Cascading Style Sheets)

层叠式样式表

从审美的角度负责页面样式。

• JS

JavaScript

从交互的角度描述页面行为。

CSS高级选择器

• 后代选择器

    .div p {
        color:red;
    }

注意：选择的是所有后代

• 交集选择器

    h1.special {
        color:red;
    }

必须同时满足两个条件：必须是h3标签，然后必须是special标签。

注意：交集选择器可以连续交（但是一般不要这么写）

    h1.special.top {
        color:red;
    }

• 并集选择器（分组选择器）

逗号分隔

• 通配符*

所有元素

• 子选择器

    div>h1 {
        color:red;
    }

注意：IE7开始兼容，IE6不兼容

• 序选择器

IE8开始兼容；IE6、7都不兼容

选择第1个li：

    ul li:first-child{
        color:red;
    }

选择最后1个li：

    1ul li:last-child{
        color:red;
    }

如果还要求兼容IE6、7，那么就要自己写类名解决

• 兄弟选择器

IE7开始兼容，IE6不兼容

    h3+p{
        color:red;
    }

选择上的是h3元素后面紧挨着的第一个兄弟。

    <h3>我是一个标题</h3>
    <p>我被选择上</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我被选择上</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我被选择上</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>