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的用法和区别的更多相关文章

  1. html5 css选择器。 井号,句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  2. <div> <p> <span>的用法和区别

    <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色.字体等 ...

  3. CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别

    前言 首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么? ①:[attribute | = value] ②:[attribute ...

  4. CSS选择器、标签,div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  5. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

  6. 《Two Days DIV + CSS》读书笔记——CSS选择器

    1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...

  7. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  8. XPath语法和CSS选择器介绍

    XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...

  9. form表单,css简介,css选择器,css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

随机推荐

  1. AC自动机练习2:修改串

    这道题的话用到了dp,一个比较简单的dp方程 1466: [AC自动机]修改串 poj3691 时间限制: 1 Sec  内存限制: 128 MB提交: 18  解决: 14[提交] [状态] [讨论 ...

  2. c++11 跨平台多线程demo和qt 静态链接(std::thread有join函数,设置 QMAKE_LFLAGS = -static)

    #include <stdio.h>#include <stdlib.h> #include <chrono> // std::chrono::seconds#in ...

  3. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  4. Java 时间不一致

    1.new Date() 得到的时间?和系统相差 相差8个小时 2.eclipse控制台打印的时间与系统相差 相差8个小时 3.log4j日志的时间与与系统相差 相差8个小时 上述问题其实是同一个问题 ...

  5. 进阶Java编程(8)反射应用案例

    1,反射实例化对象 经过一系列分析之后可以发现虽然获得了Class类的实例化对象但是依然觉得这个对象获取的意义不是很大,所以为了进一步的帮助大家理解反射的核心意义所在,下面将通过几个案例进行说明(都是 ...

  6. c# winfrom 界面设计

    1.在用DotnetBar的RibbonControl时,界面最大化时,会把电脑桌面的任务栏遮盖住: 解决办法:在load事件中写入: , Screen.PrimaryScreen.WorkingAr ...

  7. Linux监控服务并主动重启

    Linux查询后台进程,如果没有进程号,则重启服务: #!/bin/sh basepath=$(cd ``; pwd) while true do procnum=`ps -ef|grep " ...

  8. python3中SYS模块

    sys.argv               命令行参数List,第一个元素是程序本身路径sys.modules        返回系统导入的模块字段,key是模块名,value是模块sys.exit ...

  9. shell查询MySQL并将结果写入文件中

    背景 说下需求,自己搭建的一个接口开放平台,包含API文档和功能测试,部分内网地址需要修改hosts文件 准备 新建表 然后查看服务器中hosts文件 命令:cat /etc/hosts 我们要做的就 ...

  10. centos redis自启动

    #!/bin/sh # chkconfig: 2345 90 10 # description: Redis is a persistent key-value database # Simple R ...