CSS高级特性

一、CSS复合选择器

1.标签指定式选择器

标签指定式选择器又称交集选择器，由连个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one.
如：

<head>
  <meta charset="utf-8">
  <title>标签指定式选择器的应用</title>
  <style type="text/css">
     p{color:blue;}
     .special{color:red;}
     p.special{color:green;}
  </style>
</head>
  <body>
     <p>这是一段蓝色段落文本（普通）</p>
     <p class="special">指定了.special类的段落文本（绿色）</p>
     <h3 class="special">指定了.special类的标题文本（红色）</h3>
 </body>

2.后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。在标记发生嵌套时，内层标记就成为外层标记的后代。
例如：

<head>
      <meta charset="utf-8">
      <title>后代选择器</title>
  <style type="text/css">
      p strong {color:red;}
        strong {color:blue;}
  </style>
   </head>
  <body>
    <p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）。</strong></p>
    <strong>嵌套之外由strong标记定义的文本（蓝色）。</strong>
  </body>

后代选择器 p strong定义的样式仅仅适用于嵌套在< p > 标记中的< strong >标记，其他的 < strong >标记不受影响
后代选择器不仅限于使用两个元素，如果需要加入更多的元素，只需要在元素之间加上空格即可。

3.并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器，class选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。
例如：

<head>
     <meta charset="utf-8">
     <title>并集选择器</title>
     <style type="text/css">
          h2,h3,p{ color:red; font-size:14px;}
          h3,.special,#one{ text-decoration:underline;}
   </style>
   </head>
    <body>
        <h2>二级标题文本。</h2>
        <h3>三级标题文本，加下划线</h3>
        <p class="special">段落文本1，加下划线。</p>
        <p>段落文本2，普通文本。</p>
        <p id="one">段落文本3，加下划线</p>
   </body>

在这里插入图片描述

二、CSS层叠性和继承性

1.层叠性

所谓层叠性是指多种CSS样式的叠加。
例如：

<head>
     <meta charset="utf-8">
     <title>css层叠性</title>
    <style type="text/css">
          p{font-size:12px;font-family:"微软雅黑";}
          .special{font-size:16px;}
          #one{color:red;}
   </style>
   </head>
     <body>
          <p class="special" id="one">段落文本1</p>
          <P>段落文本2</P>
          <p>段落文本3</p>
   </body>