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

曾经终败给现在 2022-09-18 01:59 151阅读 0赞

# 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选择器 可以有多个  
  
<span id="spanId">  
<span class="spanClass1 spanClass2">

##  3.3 使用多个class选择器  ##

###  1) 语法 ###

<span class="spanClass1 spanClass2">  
  
① 引入多个时, 值用空格隔离  
② 渲染的顺序 以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>