CSS的选择符（二）

来自CloudWiki
58.56.27.221（讨论）2017年10月16日 (一) 01:55的版本 （→‎“高级”选择符）
跳转至： 导航， 搜索

基本选择符

  • 基本选择符的综合应用

标记名选择符

  • 标记名选择符也称为类型选择符，就是用HTML的标记名称作为选择符，为页面中某一类标记指定统一的CSS样式。
  • 用标记名选择符定义的样式表对页面中该类型的所有标记都有效。
  • 例：选择并设置所有 <p> 元素的样式：
p{ 
    background-color:yellow;
}

ID选择符

  • 如果某个标记的各部分内容样式并不相同，怎么办？
  • 可以用ID选择符为某一部分单独定义一个唯一的样式表。
  • 例：为id为firstname的设定样式
#firstname{ 
    background-color:yellow;
}

class选择符

  • 如果定义了某种样式，希望其他的标签也能使用该样式，怎么办？
  • 多个标签需要采用相同的样式，所以要为它们定义一个共享样式。
  • 例： 选择并设置 class="intro" 的元素的样式
.intro{ 
    background-color:yellow;
}
  • 试一试：W3C实例
  • 小综合：运行以下代码，并分析代码中都有哪些选择符？
<!DOCTYPE html>
<html>
    <head>
       <style>
          h1{ text-align:center;}          
          p{ text-align:center;}
          
          #writer{
             text-align:right;
          }
          .name{
             background-color:yellow;
          }
       </style>
    </head>
    <body>
       <h1>欢迎来到我们的主页</h1>
       <p id="writer">唐老鸭，米老鼠</p>
       <p class="name">我是唐老鸭。</p>
       <p>我住在 Duckburg。</p>
       <p>我最好的朋友是米老鼠。</p>
       <p class="name">我是米老鼠。</p>
       <p>我住在 Duckburg。</p>
       <p>我最好的朋友是唐老鸭。</p>
   </body>
</html>

“高级”选择符

群组选择符

  • 群组选择符可以为任意多种不同类型的选择符定义一个统一的样式表。
  • 例如：p, h3 { 样式规则; }
  • 则该样式表对页面中所有的<p>和<h3>标记都有效。
  • 再如：#first, .sec, .item, p { 样式规则; }
  • 试一试：W3C实例

通用选择符

  • 通用选择符是一个特殊的群组选择符，就是用通配符*表示任意标记，为页面中的所有元素定义通用的样式规则
  • 例如 * { margin:0; padding:0; }
  如果为body定义样式表 body { 样式规则; } 则有些样式在子元素中不能继承，尤其对<h>、<table>等标记不起作用，而*通用选择符样式表则对所有标记有效。

包含选择符

  • 又称为派生选择符，相当于条件选择样式表，仅对包含在指定父元素内符合条件的子元素有效（不论中间还有多少层标记）。
  • 例:选择并设置位于
    元素内部的每个

    元素的样式：

div p
{ 
   background-color:yellow;
}

子对象选择符

  • 尚浩亮牛逼
  • 如果要对父元素标记内包含的某种特定子标记定义样式，可使用子对象选择符。
  • 与包含选择符不同的是，子对象选择符只对父元素内一级子元素定义样式
  • 例子：选取父元素是
    元素的每个 <p> 元素，并设置其背景色：
div p
{ 
background-color:yellow;
}
  • 试一试：W3C实例
  • 小综合：运行以下代码，并分析代码中都有哪些选择符？
<!DOCTYPE html>
<html>
    <head>
       <style>
         * { margin:0;  padding:0; }
          h1,p{ text-align:center;}          
         
          
          #content>p
          {
    text-align:right;
}
          #content p{
             background-color:yellow;
          }
       </style>
    </head>
    <body>
       <h1>欢迎来到我们的主页</h1>
       <div id="content">
          <p>唐老鸭，米老鼠</p>
          <div>
              <p>我是唐老鸭。</p>
              <p>我住在 Duckburg。</p>
              <p>我最好的朋友是米老鼠。</p>
              <p>我是米老鼠。</p>
              <p>我住在 Duckburg。</p>
              <p>我最好的朋友是唐老鸭。</p>
          </div>
       </div>
   </body>
</html>

“更高级”选择符

  • 相邻选择符:是指根据标记的前后关系用前一个标记为条件，对它相邻的下一个标记用相邻选择符定义样式表。
  • 属性选择符:指根据标记的id、class、title、alt（图像标记属性）某个属性是否定义、或根据某个属性的取值作为条件为这些标记定义样式表。
  • 伪对象（伪元素）选择符:
    • 设置指定标记内第一行文本的样式p::first-line {color:blue;}
    • 置指定标记内第一个字符的样式p::first-letter {color:red; font-size:24pt;}
    • 在CSS3中推出了大量的伪对象选择符，例如::after、::before、::placeholder、::selection等等，此处不做详细介绍，感兴趣的读者可自行查阅相关资料。
  • 伪类选择符

样式规则的优先级

  • 样式规则的优先级原则
  • 用!important提高样式优先级

下一节 项目实训2-2

返回 网页设计与开发