ID选择器

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

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

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



示例:

<!doctype html>
<html>
<head>
<style type="text/css">
#box{/*ID样式*/
background: url("../photos/野外.jpg")center bottom;
height: 200px;
width: 400px;
border: solid 2px red;
padding: 100px;
}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box">问君能有几多愁,恰似一江春水向东流</div>
</body>
</html>

运行结果:



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



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

通配选择器


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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器(理解)</title>
<base target="_self">
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a>
</body>
</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. md5加密后不能解密

    MD5加密原理是散列算法,散列算法也称哈希算法.计算机专业学的数据结构就有哈希表这一知识点.比如10除以3余数为一,4除以3余数也为一,但余数为一的就不知道这个数是哪个了.所以md5不能解密.就算是设 ...

  2. 第06组 Beta冲刺(2/5)

    队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 维护后端代码 学习后端架构 GitHub签入记录 接下来的计划 维护后端代码,跟进组员完 ...

  3. TICK/TIGK运维栈安装运行 docker-compose【下】

    InfluxDB 构建Dockerfilevim /opt/influxdb-docker/Dockerfile FROM influxdb COPY influxdb.conf /etc/influ ...

  4. uniapp - 关于ios调试

    [ios调试] 1.一台windows电脑.一根apple数据线(一旦连接以后,apple设备就会自动识别itunes软件,如果没有安装会提示) 2.安装itunes (爱思助手) 3.官方教程:ht ...

  5. jsp页面获取后台传过来的list集合的长度

    在jsp页面导入函数标签库: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"% ...

  6. Java基础 try...catch(多个异常) 多个异常采取同样的解决措施

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  7. 运维笔记--linux环境提示python: command not found

    场景描述: 新部署的容器环境,终端执行python命令,提示没有该命令. 从报错异常可以看出,可能是python环境未安装. 分析思路: 检查python路径: 方式一:type -a python ...

  8. 360极速浏览器安装vue-devtools插件

    360极速浏览器扩展程序中心并没有提供vue-devtools插件,因此需要自己安装.本文介绍方法适用于所有Chrome内核浏览器. 本人已将编译后的Chrome插件包上传网盘,需要的可以直接下载使用 ...

  9. chrome浏览器postman 插件安装

    postman 软件功能 模拟各种HTTPrequests 从常用的GET.POST到RESTful的PUT.DELETE…等等.甚至还可以发送文件.送出额外的header. Collection功能 ...

  10. windows系统下同时安装mysql5.5和8.0.11

    前提:电脑已安装5.5,增安装8.0.11 zip版本 1.官网下载mysql10.8.0.11 —找到mysql community server 为下载页面URL:https://dev.mysq ...