承接上一篇class选择器，这一篇我们来说说css的id选择器。

id选择器类似于类选择器，不过也有一些重要的差别，首先，id选择器前面有一个#号----称它为棋牌号吧，class为点号，用法就和class
选择器类似，基本用法如下：

#element{属性名：属性值}

我们来看一个列子吧：
<html>
<head>
<style type="text/css">
#p1{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

在浏览器里运行上面一段上面一段代码，就可以看到p元素的文字为加粗红色，看到了吧，id选择器用法就是这么简单。
不过我们知道，可以为多个元素指定相同的类名，但是对于id名，html文档中只能出现一个id名，所以我们得记住：保持id的唯一性。

不过有的人会说，如果一个html文档中出现了多个相同的id名会出现什么情况。实际上，浏览器通常不检查html中id的唯一性，这就意味着如果你在
html文档中设置了多个相同id属性值的元素，就可能为这些元素应用相同的样式.
如：

<html>
<head>
<style type="text/css">
#same{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="same">
This paragraph will also be center-aligned.
</p>
<h4 id="same">This is a title</h4>
</body>
</html>

结果p元素和h4元素中的文字也是红色粗体，证明有相同id的元素都会有该样式，但这种用法是错误的，如果只是想让多个元素拥有相同样式，
请记住使用class属性！这里顺便提一下，多个相同id名会导致编写dom脚本变得困难。我们后面会提到的。
好了，今天的文章就到这里了，谢谢大家！

css常用属性总结第二弹:id选择器的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. css常用属性初总结第一弹:id和class选择器

    前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...

  4. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  5. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  6. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  7. css笔记10：多个id选择器/类选择器包含相同部分问题的探讨

    有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset &qu ...

  8. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  9. CSS常用属性之选择器

    css选择器 序号 选择器 例子 例子描述 1 .class .intro 选择class="intro"的所有元素 2 #id #firstname 选择id="fir ...

随机推荐

  1. 20165212 预备作业3 Linux安装及学习

    20165212 预备作业3Linux安装及学习 Linux虚拟机的安装过程 我像大部分同学一样,通过助教学姐给的Ubuntu下载地址下载映像文件.VB,但是屡次出现问题,不停的闪出一下错误提示窗口: ...

  2. SQL夯实基础（八）：联接运算符算法归类

    今天主要介绍三个常用联接运算符算法:合并联接(Merge join),哈希联接(Hash Join)和嵌套循环联接(Nested Loop Join).(mysql至8.0版本,都只支持Nested ...

  3. 【DUBBO】Dubbo原理解析-服务引用

    服务引用是服务的消费方向注册中心订阅服务提供方提供的服务地址后向服务提供方引用服务的过程. 服务的应用方在spring的配置实例如下: <dubbo:referenceid="demo ...

  4. CMS搭建，织梦CMS使用教程

    http://www.dedejs.com/ 织梦DedeCms 5.7全站去版权去广告方法(含后台) http://429006.com/article/technology/3367.htm 1. ...

  5. Ipython notebook 一些技巧

    在模块后面输入:?,运行可以显示说明: 输入:??,运行可以显示源代码. 输入%matplotlib inline将matplotlib库导入,要显示的图片就可以嵌入到网页中了 %prun用于代码的执 ...

  6. bzoj 1069 [SCOI2007]最大土地面积——旋转卡壳

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1069 发现 n 可以 n^2 .所以枚举对角线,分开的两部分三角形就可以旋转卡壳了. 注意坐 ...

  7. apache编译参数详解

    常用编译参数: ./configure     //配置源代码树–prefix=/usr/local/apache    //体系无关文件的顶级安装目录PREFIX ,也就Apache的安装目录.–e ...

  8. (转)Inno Setup入门（二）——修改安装过程中的图片

    本文转载自:http://blog.csdn.net/augusdi/article/details/8564793 修改安装过程中的图片 一般编译之后,安装过程中出现在左边图片是是下图这个样子的: ...

  9. pull同步远程仓 笔记

    一.远程仓库删除文件 远程仓 1.py 本地仓 1.py  2.py pull后 本地仓 1.py 这里的2.py 是没有改动过的情况,如改动了要解决冲突的,见:https://www.cnblogs ...

  10. 【转】Jmeter入门：如何建立和使用Jmeter测试环境

    一.工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用, 后来又扩充了其它的功能.j ...