ID选择器

ID（IDentity）是编号的意思，一般指定标签在HTML文档中的唯一编号。ID选择器和标签选择器、类选择器的作用范围不同。

ID选择器仅仅定义一个对下对象的样式，而标签选择器和类选择器可以定义多个对象的样式。

ID选择器以#号作为前缀，然后是一个自定义的ID名，用法如图所示



示例：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. 	<style type="text/css">
  5. 		#box{/*ID样式*/
  6. 		background: url("../photos/野外.jpg")center bottom;
  7. 			height: 200px;
  8. 			width: 400px;
  9. 			border: solid 2px red;
  10. 			padding: 100px;
  11. 			}
  12. 	</style>
  13. <meta charset="utf-8">
  14. <title>无标题文档</title>
  15. </head>
  16. <body>
  17. 	<div id="box">问君能有几多愁，恰似一江春水向东流</div>
  18. </body>
  19. </html>

运行结果：



除此之外，也可以为ID选择器指定标签范围。定义指定ID选择器的语法机构如图：



采用这种方法可以提高该样式的优先级。

通配选择器

如果HTML所以元素都需要定意思相同的样式，则一个个分别为它们定义样式，会感到很麻烦。通过使用通配选择器可以解决这一麻烦。

统配选择器是固定的，使用"*"表示，例如：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4.     	<meta charset="utf-8">
  5.         <title>通配符选择器（理解）</title>
  6.         <base target="_self">
  7.         <style>
  8. 			*{
  9. 				color: red;
  10. 				}
  11. 		</style>
  12.     </head>
  13.     <body>
  14. 		<h1>我是标题</h1>
  15.         <p>我是段落</p>
  16.        	<a href="#">我是超链接</a>
  17.     </body>
  18. </html>

CSS ID选择器&通配选择器的更多相关文章

  1. css的导入与基础选择器

    css是什么 css也是一门标记语言,主要用作修改控制html的样式 css书写的位置(导入) css是用来控制页面标签的样式,但是可以根据实际情况书写在不同的位置, 放在不同位置有不同的专业叫法,可 ...

  2. Jquery选择器分类：基本选择器，层次选择器，过滤选择器，表单选择器。

    基本选择器 说明:通过元素id.class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test& ...

  3. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  4. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  5. CSS（二）：选择器

    一.基本选择器 1.标签选择器 HTML标签作为标签选择器的名称,例如<h1>~<h6>.<p>等. 语法: p{font-size: 16px;} p:标签选择器 ...

  6. CSS基础知识：常见选择器示例

    CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HT ...

  7. CSS的五种基本选择器

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...

  8. css第一篇：元素选择器

    1:多个选择器 h1, h2 {}       ——h1或h2标签的所有元素 2:通配选择器 * {}     ——所有元素 3:元素选择器 div {}   ——所有div元素 4:类选择器 .te ...

  9. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

随机推荐

  1. 为什么使用css3和div布局？

    1,代码精简(没有本身自带的一些属性,容易设置样式)2,解决了table表格的嵌套问题3,速度问题(页面代码减少,增加了编写代码的速度)4 ,对排名的影响,基于xhtml标准的div+css布局会更快 ...

  2. kafka发送超大消息设置

    最近开发一cdc框架,为了测试极端情况,需要kafka传递100万条数据过去,1个G左右,由于其他环节限制,不便进行拆包(注:测下来,大包走kafka不一定性能更好,甚至可能更低). 测试百万以上的变 ...

  3. GIS地理处理脚本案例教程——批量栅格分割-批量栅格裁剪-批量栅格掩膜-深度学习样本批量提取

    GIS地理处理脚本案例教程--批量栅格分割-批量栅格裁剪-批量栅格掩膜-深度学习样本批量提取 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 关键 ...

  4. 【转】23 个安卓重难点突破，带你吃透 Service 知识点「长达 1W+ 字」

    前言 学 Android 有一段时间了,想必不少人也和我一样,平时经常东学西凑,感觉知识点有些凌乱难成体系.所以趁着这几天忙里偷闲,把学的东西归纳下,捋捋思路. 这篇文章主要针对 Service 相关 ...

  5. centos7.6下的python3.6.9虚拟环境安装elastalert

    centos7.6安装python3.6.9+elastalert .编译安装python3..9环境 # 安装依赖 yum -y install zlib-devel bzip2-devel ope ...

  6. LeetCode：第K个排列【60】

    LeetCode:第K个排列[60] 题目描述 给出集合 [1,2,3,…,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: &quo ...

  7. 思维导图Xmind8

    Xmind——一款强大的思维导图工具,方便记忆和理清思路,同时思维导图特殊的记录方式也便于捕捉跳跃思考. 五款思维导图软件:MindManager.iMindMap.XMind.MindMapper. ...

  8. tablespace表空间

    tablespace——表空间,便于理解,把oracle数据库看作一个实在房间,表空间可以看作这个房间的空间,是可以自由分配,在这空间里面可以堆放多个箱子(箱子可以看作数据库文件),箱子里面再装物件( ...

  9. 【转】Fuel-openstack的搭建（二）

    原文链接:https://blog.csdn.net/qq_35180983/article/details/82181525 部署Openstack 3.1 登陆 登陆http://10.20.0. ...

  10. linux中的文件权限chmod

    linux中的文件权限chmod ​ 还是GPU集群那点事儿,集群之间磁盘互相挂载,普通用户也可以操作/cu02_nfs./cu04_nfs文件夹,这就牵扯到权限的问题,去google发现所谓的777 ...