CSS选择器div和p的用法和区别
div,p、div p、div>p、div+p、div~p、div.a的用法和区别
div,p:选择所有<div>元素和<p>元素
<style>
p,span{font-size:24px}
</style>
<div>Hello World</div>
<p>Hello</p>
<p>World</p>
这个例子中<div>和<p>元素的字体大小都是24px
div span:选择<div>元素内部所有的<span>元素,包括子标签元素和孙子辈标签元素
<style>
div span{font-size:24px}
</style>
<div>
<p>
<span>Hello</span>
</p>
<span>World</span>
</div>
这个例子中<div>内部所有的<span>元素的字体大小都是24px
div>span:选择<div>元素内部所有的<span>元素,不包括孙子辈标签元素
<style>
div>span{font-size:24px}
</style>
<div>
<p>
<span>Hello</span>
</p>
<span>World</span>
</div>
这个例子中只有World的字体大小是24px
div+p:选择紧接在 <div> 元素之后的 <p> 元素
<style>
div+p{font-size:24px}
</style>
<div>Hello</div>
<p>World</p>
这个例子中只有World的字体大小是24px
div~p:选择<div>元素之后所有的<p>元素
<style>
div~span{font-size:24px}
</style>
<div>我是div</div>
<p>Hello</p>
<p>World</p>
这个例子中<p>元素的字体大小都是24px
div.a:选择<div>元素class=a的元素
<style>
div.a{font-size:24px}
</style>
<div class="a">hello world</div>
这个例子中hello world字体大小是24px
CSS选择器div和p的用法和区别的更多相关文章
- html5 css选择器。 井号,句号的区别
.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...
- <div> <p> <span>的用法和区别
<div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色.字体等 ...
- CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别
前言 首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么? ①:[attribute | = value] ②:[attribute ...
- CSS选择器、标签,div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- Html 之div+css布局之css选择器
CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的 字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...
- 《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- XPath语法和CSS选择器介绍
XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...
- form表单,css简介,css选择器,css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
随机推荐
- 遗传算法与Java代码简单实现
参阅地址: https://www.jianshu.com/p/ae5157c26af9 代码实现: public class GA { private int ChrNum = 10; //染色体数 ...
- 怎样理解 DOM 的三种层级关系
除了根节点,其他节点都有三种层级关系. 父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节 ...
- IntelliJ IDEA Spring boot devtools 实现热部署
一.spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动部署新代码. 二.原理 使用了两个ClassLoader,一个ClassLoader用来加载那些不会变 ...
- Fonour.AspnetCore 生成SQL SERVER数据库
Install-Package EntityFramework Add-Migration InitialCreate Update-Database
- 【原创】大叔经验分享(56)hue导出行数限制
/opt/cloudera/parcels/CDH/lib/hue/apps/beeswax/src/beeswax/conf.py # Deprecated DOWNLOAD_CELL_LIMIT ...
- HLSL中constant variables的packing规则
HLSL中constant variables的packing规则 参考MSDN上的官方文档.一般而言,HLSL将数据打包为4字节对齐,此外,它不允许数据跨16字节(即4个float的vector)的 ...
- js弹窗返回值详解(window.open方式)
今天在改公司一个老系统时,碰到了window.open()的这个语法.虽然这个方法有点老,不太用了.所以有点不清楚父级弹框如何获取子级页面返回的值.为了解决这个问题,上网搜了一下.原作者参考网址:ht ...
- 1 SQL SERVER 实现字符串分割成table的方法
CREATE FUNCTION [dbo].[fn_SplitStringToTable] ( @p_Input VARCHAR(MAX), @p_Delimeter CHAR() = ',' ) R ...
- google 高清卫星照片
rel: 如何下载 50 年前自己家乡的高清卫星照片 link: https://zhuanlan.zhihu.com/p/30953275
- 价值19.9元 <问药师 - 儿童维生素D的补充> 总结
1岁以上的婴幼儿(一直到18岁), 每天应该补充维生素D 400-800UI, 这其中应包含当天的晒太阳时间. 1岁以下400UI户外晒太阳时间, 夏季30分钟, 冬季2小时, 再根据实际情况加减每天 ...