CSS id选择器

news/2024/7/5 1:50:23

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一 id选择器

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

      id选择器以#来定义。

       下面的两个id选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

        #red{

           color:red;

      }

        #green{

           color:green;

        }

下面的html代码中,id属性为red的p元素显示红色,而id属性为green的p元素显示为绿色。

        <p id="red">这个段落是红色</p>

        <p id="green">这个段落是绿色</p>

注意:id属性只能在每个html文档中出现一次。

二 id选择器和派生选择器

    在现代布局中,id选择器中常常用于建立派生选择器。

     #sidebar p{

       font-style:italic;

       text-align:right;

        margin-top:0.5em;

  }

上面的样式只会应用出现在id是sidebar的元素内的段落。这个元素很可能是div或者表格单元,尽管它也是可能一个表格或者其他块级的元素。

一个选择器多种用法。

即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以使用很多次:

#sidebar p{

     font-style:italic;

     text-align:right;

     margin-top:o.5em;

}

    #sidebar h3{
      font-size:2em;
      font-weight:normal;
      font-style:italic;
      margin:0;
      line-height:1.5;
      text-align:right;
    }

在这里,与页面中的其他p元素明显不同的是,sidebar内的p元素得到了特殊的处理。同时,与页面中其他的所有h3元素明显不同的是,sidebar中的h3元素得到了不同的特殊处理。

单独的选择器

id选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

    #sidebar {
     boder:2px dotted #000;
     padding:10px;  
    
    }

    根据这条规则,id为sidebar的元素拥有二个像素宽度黑点状边框,同时其周围
    有10个像素宽的内边距。

    div#sidebar{
        boder:2px dotted #000;
        padding:10px;
    }

转载于:https://my.oschina.net/u/1422716/blog/669661


http://lihuaxi.xjx100.cn/news/244628.html

相关文章

Centos下安装mysql 总结

一、MySQL安装 Centos下安装mysql 请点开:http://www.centoscn.com/CentosServer/sql/2013/0817/1285.html 二、MySQL的几个重要目录 MySQL安装完成后不象SQL Server默认安装在一个目录&#xff0c;它的数据库文件、配置文件和命令文件分别在不同的目录&#xff0c;了解这些目录…

共享程序集和强命名程序集(3):强命名程序集的一些作用

强命名程序集能防篡改 用私钥对程序集进行签名&#xff0c;并将公钥和签名嵌入程序集&#xff0c;CLR就可以炎症程序集未被修改或破坏。程序集安装到GAC时&#xff0c;系统对包含清单的那个文件的内容进行哈希处理&#xff0c;将Hash值与PE文件中嵌入的RSA数字签名进行比较。如…

eclipse中安装使用Gradle构建工具

1.下载二进制文件并解压如下&#xff1a; 下载网址&#xff1a;https://gradle.org/releases/ 2.配置gradle环境变量 3.验证是否安装成功 4.在eclipse中下载gradle插件并配置 5.重启eclipse,新建一个gradle项目&#xff0c;选择gradle即可

玩具javascript:cookie管理

2019独角兽企业重金招聘Python工程师标准>>> ;(function(window, undefined){var CookieUtil window.CookieUtil window.CookieUtil || {};var doc window.document;// 读取名称为name的Cookie信息CookieUtil.read function(name){// 暂无Cookieif(doc.cookie.l…

【自然语言处理(NLP)】基于SQuAD的机器阅读理解

【自然语言处理&#xff08;NLP&#xff09;】基于SQuAD的机器阅读理解 作者简介&#xff1a;在校大学生一枚&#xff0c;华为云享专家&#xff0c;阿里云专家博主&#xff0c;腾云先锋&#xff08;TDP&#xff09;成员&#xff0c;云曦智划项目总负责人&#xff0c;全国高等学…

最大子段和问题

题目&#xff1a;HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学。今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决。但是,如果向量中包含负数,是否应该包含某个负数,并期望旁边的正数会弥补它呢…

layerconfirm确认框的使用

$(#id-act-cancel).click(function() { layer.confirm(确定要作废该合同&#xff1f;, { btn : [确定, 取消] // 按钮 }, function() { var arrItemId []; $("tbody :checkbox:checked", $table).each(fun…

前端项目如何管理

前端项目如何管理 前端项目的管理分为两个维度&#xff1a;项目内的管理与多项目之间的管理。 1. 项目内的管理 在一个项目内&#xff0c;当有多个开发者一起协作开发时&#xff0c;或者功能越来越多、项目越来越庞大时&#xff0c;保证项目井然有序的进行是相当重要的。 一般会…