html、css、js入门-8：CSS选择器

CSS的用法: 选择器对应样式

 

CSS 选择器

 

元素选择器

   . html 文档的元素就是选择器
       -- 比如 <p>、<h1> 等

     html {color:black;}
     h1   {color:blue;}
     h2   {color:silver;}

 

 

类选择器

    . 语法为:  .className {color:red;}

       .myclass
       {    <!--声明一个样式类-->
            background-color:Pink;
            font-size:35pt;
        }

      <!--将元素的 class 属性的值设置为样式类的名称-->

        <h2 class="myClass">h2中的文本</h2>
        <p class="myClass">段落中的文本</p>

 

分类选择器

   .   将类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制

   .   语法为: 元素选择器 .className{}

      p.important{
          color:red;
          font-size:20pt;
        }
     
            <!--只有<p>元素使用样式-->
    
     <h2 class="important">h2文本</h2>
     <p class="important">段落文本</p>

 

 

项目案例：
CSS 选择器(1)

 1、 创建 html文档

 2、 分别使用元素选择器、类选择和分类选择器为页面元素设置样式

 

 

id  选择器

  .  定义id选择器时，选择器前面需要有一个#号，选择器本身则为文档中某个元素的id属性的值

    #mostImportant{
      color:red;
      background:yellow;
   }

    <!--在一个HTML文档中，某ID选择器仅使用一次-->

   <h1 id="mostImportant">This is important!</h1>

 

 

选择器分组

    . 选择器声明为以逗号隔开的元素列表

          -- 将一些相同的规则作用于多个元素

        h2,p
        {
            color:gray;
        }

 

 

派生选择器

    . 通过依据元素在其位置的上下文关系来定义样式
 
         -- 选择器一端包括两个或多个用空格分隔的选择器

        h1 span
        {
           color:red;
        }

        <h1>
             This is a <span>important</span>
             heading
        </h1>

       <!--只有<h1>元素中的<span>元素中的文本使用该样式-->

 

 

伪类选择器(设置选择器的不同状态时的样式)

   . 伪类用于向某些选择器添加特殊的效果

   . 使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类

   .常用伪类

       -- :link     <!--链接状态-->
       -- :active   <!--活动状态-->
       -- :visited  <!--访问状态-->
       -- :hover    <!--悬浮状态-->
       -- :focus    <!--获取焦点状态-->

    例如:
 
          a:link{
             color:black;
             font-size:15pt;
          }
          a:visited{
             color:pink;
             font-size:15pt;
          }
          a:hover{
             font-size:20pt;
          }
          a:active{
             color:red;
          }

 

CSS 选择器(2)

 1. 创建html文档
 2. 分别使用id选择器、派生选择器、选择器分组和伪类选择器为页面元素设置样式