css常用属性总结第二弹:id选择器
承接上一篇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选择器的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- css常用属性初总结第一弹:id和class选择器
前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- css笔记10：多个id选择器/类选择器包含相同部分问题的探讨
有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset &qu ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- CSS常用属性之选择器
css选择器 序号 选择器 例子 例子描述 1 .class .intro 选择class="intro"的所有元素 2 #id #firstname 选择id="fir ...
随机推荐
- 电源lc滤波及单点接地（转载）
1.在一个高速数字电路设计里面,看到在电源部分进行了如下的处理.不过怎么都不能理解,如果说1uF和0.1uF电容并联,这块处理是一个经验值.那么前面的LC滤波参数,参数又是如何确定的?DVDD-in输 ...
- Python中super()和__init__()方法
采用新式类,要求最顶层的父类一定要继承于object,这样就可以利用super()函数来调用父类的init()等函数, 每个父类都执行且执行一次,并不会出现重复调用的情况.而且在子类的实现中,不用到处 ...
- nginx-unit docker 运行以及php &&golang 简单使用
备注: nginx unit nginx 开源的新的nginx 开发平台,但是说白了,个人感觉一般,而且官方文档也不是很好, api 接口目前暂时文档比较....,以前写过虚拟机&& ...
- web 调试工具docker的安装使用
1. weinre 工具 docker run -d -p 8080:8080 beevelop/weinre 2. vorlonjs(不支持https) docker run --name v ...
- drill java && spring jdbc 连接使用
原生 jdbc 连接 1. maven 包 <dependency> <groupId>org.apache.drill.exec</groupId> < ...
- adb error: device offline
adb 调试一直报错 $ adb shell error: device offline 解决办法: $ adb kill-server $ adb start-server * daemon not ...
- dts、dtb编译
设备树(Device Tree)包括DTC(device tree compiler),DTS(device tree source和DTB(device tree blob). dtc编译器能够把 ...
- Bootstrap组件系列之福利篇几款好用的组件(推荐)
引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...
- Java-Runoob-面向对象：Java 包（Package）
ylbtech-Java-Runoob-面向对象:Java 包(Package) 1.返回顶部 1. Java 包(package) 为了更好地组织类,Java 提供了包机制,用于区别类名的命名空间. ...
- Hadoop MapReduce 初步学习总结
在Hadoop中一个作业被提交后,其后具体的执行流程要经历Map任务的提交中间结果处理,Reduce任务的分配和执行直至完成这些过程,下面就是MapReduce中作业详细的执行流程图(摘自<Ha ...