zoukankan      html  css  js  c++  java
  • CSS Id 和 Class选择器

    CSS Id 和 Class选择器

    如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

    一、id 选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

    以下的样式规则应用于元素属性 id="para1":

    #para1
    {
        text-align:center;
        color:red;
    }

    注意:ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css教程</title> 
    <style>
    #para1
    {
        text-align:center;
        color:red;
    } 
    </style>
    </head>
    
    <body>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
    </body>
    </html>

    效果:

    二、class 选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

    class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    .center {text-align:center;}

    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css教程</title> 
    <style>
    .center
    {
        text-align:center;
    }
    </style>
    </head>
    
    <body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 
    </body>
    </html>

    效果:

    你也可以指定特定的HTML元素使用class。

    在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

    p.center {text-align:center;}

    注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css教程</title> 
    <style>
    p.center
    {
        text-align:center;
    }
    </style>
    </head>
    
    <body>
    <h1 class="center">这个标题不受影响</h1>
    <p class="center">这个段落居中对齐。</p> 
    </body>
    </html>

    效果:

  • 相关阅读:
    盒子跟随鼠标移动而移动(兼容IE8)
    JavaScript捕获鼠标坐标
    JavaScript判断滚动条是否滚动到底部
    JavaScript自定义getStyle方法获取元素样式
    JavaScript实现简单的图片切换功能
    SpeedReader
    JavaScript定时器
    远程登陆ubantu服务器 .bashrc文件每次打开终端都需要source的问题
    阿里云服务器Ubantu16.04升级python3.6
    阿里云服务器ubantu创建新用户登录显示问题
  • 原文地址:https://www.cnblogs.com/lizm166/p/9343013.html
Copyright © 2011-2022 走看看