文档章节

CSS id选择器

effto
 effto
发布于 2016/05/04 15:13
字数 487
阅读 5
收藏 0

一 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;
    }

© 著作权归作者所有

上一篇: CSS类选择器
下一篇: CSS派生选择器
effto
粉丝 3
博文 56
码字总数 28418
作品 0
长春
私信 提问
CSS 从零开始(一)初识CSS

版权声明:转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 https://blog.csdn.net/powertoolsteam/article/details/89334612 什么是CSS CSS...

powertoolsteam
04/16
0
0
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
css3在移动端中应用的选择器(超实用)

增强的选择器 1属性选择器 完全匹配选择器 测试完全匹配属性选择器 包含匹配选择器 测试包含匹配选择器 测试包含匹配选择器 测试包含匹配选择器

痴情小云
2016/12/14
0
0
CSS选择器、优先级与匹配原理

1 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入style=""的方式,...

上赶的大老鼠
2013/12/03
0
0
[译文]CSS的渲染性能

原文链接:Efficiently Rendering CSS 我承认,我不经常考虑下面这个问题:我们写的CSS如何才能,换而言之,如何才能让浏览器更快地渲染它。 这的确是浏览器厂商应该考虑的问题:页面加载越快...

huangpin815
2017/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 你一辈子都不可能跟她这么亲近

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享George Benson的单曲《Six Play》: 《Six Play》- George Benson 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
39分钟前
274
8
优雅的关闭Spring Boot

优雅的关闭Spring Boot 1、实现 TomcatConnectorCustomizer 接口拿到Tomcat的连接获取 Tomcat连接池 2、实现 ApplicationListener<ContextClosedEvent> 监听服务器关闭事件,注册JVM钩子函数...

sowhat
今天
2
0
Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
4
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
4
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部