07-DIV+CSS-选择器深入-通配符选择器-父子选择器-选择器分组

1. 通配符选择器

1) 概念

选择所有元素

2) 语法

* {
属性名:属性值;
… …
}

3) 举例

* {
margin: 0px;
padding: 0px;
}

让所有元素的外边距和内边距都默认为0.

4) margin 补充

① margin: top right bottom left;

从上外边距 (top) 开始围着元素顺时针旋转的

② 如果为外边距指定了 3 个值
则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。

③ 如果给定了两个值
第 4 个值会从第 2 个值复制得到，
第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。

④如果只给定一个值
那么其他 3 个外边距都由这个值（上外边距）复制得到。

2. 父子选择器

1) 语法

父选择器名子选择器名 {
属性名: 属性值;
……
}

/* 可以有多级 */
爷爷父亲孩子 {
… …
}

2) 示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css1.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
      /*父子选择器*/
      tr td {
        font-size: 30px;
        font-style: italic;
        color: red;
      }
      #spanId span {
        color: green;
        background: silver;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
    </table>
    <span id="spanId">
        我是<span>周杰伦</span>.
    </span>
  </body>
</html>

3. 选择器的深入

3.1 被多个选择器选择

id > class > element > 通配符

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css1.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
      #spanId {
        font-size: 50px;
        color: red;
      }
      .spanClass {
        font-size: 30px;
        color: green;
      }
      span {
        font-size: 10px;
        color: gray;
      }
      * {
        color: blue;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <span id="spanId" class="spanClass">新闻一</span> <br/>
    <span class="spanClass">新闻二</span><br/>
    <span>新闻三</span>
    <a href="#">我是超链接</a>
  </body>
</html>

3.2 一个元素拥有的选择器的限制

① id选择器最多有一个
② class选择器可以有多个

3.3 使用多个class选择器

1) 语法

① 引入多个时, 值用空格隔离
② 渲染的顺序以css文件中类选择器的顺序为准
即, 属性冲突时, 后出现的会覆盖先出现的

2) 举例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css3.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
      .styCls1 {
        font-size: 30px;
        color: red;
        font-weight: bold;
      }
      .styCls2 {
        color: silver;
      }
    </style>
  </head>
  <body>
    <span class="styCls1 styCls2">
      我是张三, 你是李四吗?
    </span>
    <br/>
    <span class="styCls2 styCls1">
      对, 我是李四. 有什么事吗?
    </span>    
  </body>
</html>

3.4 选择器分组

1) 概念

为多个选择器同时设置规则

2) 语法

选择器1,选择器2,选择器3 {
…
}

3) 举例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css4.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
      #id,.spanCls,span {
        font-size: 32px;
        font-weight: bold;
      }
      #spanId {
        color: red;
      }
      .spanCls {
        color: green;
      }
      span {
        color: blue;
      }
    </style>
  </head>
  <body>
    <span id="spanId">
      我是张三, 你是李四吗?
    </span>
    <br/>
    <span class="spanCls">
      对, 我是李四. 有什么事吗?
    </span>    
    <br/>
    <span>
      可以借点钱吗?
    </span>  
  </body>
</html>