css中标签嵌套规则有哪些

css中标签嵌套规则有哪些

嵌套规则介绍:

(推荐教程:css快速入门)

1、body 可以直接包含块状元素、ins、del、script等不可以直接包含行内元素;

2、ins 和 del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素;

3、p、h1-h6 可以直接包含行内元素和文本信息,但是不允许包含块状元素;

立即学习“前端免费学习笔记(深入)”;

4、dl 元素只允许包含 dt 和 dd,同时 dt 不能包含块状元素,只允许包含行内元素,对于dd 可以包含任何元素;

5、form 元素不能够直接包含 input 元素。原因在于 input 元素属于行内元素,form 元素仅仅能够包含块状元素;

6、table 元素只能够包含 caption、colgroup、col、thead、tbody、tfoot,不能够直接包含 tr 或者其他任何元素;

以上就是css中标签嵌套规则有哪些的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615616.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:59:06
下一篇 2025年12月24日 04:59:23

相关推荐

  • CSS3如何实现图片滚动播放效果(附代码)

    CSS3实现图片滚轮效果 在平常我们使用一些滚动图片的效果,都是用javascript代码(JQuery)实现,但是在如今Html5和CSS3盛行的时代,可以替代javascript代码来实现一些常见的效果来提高网页的加载速度,对用户来说体验是更加友好的。 特别是现在微信平台开发比较火热的年代,同样…

    好文分享 2025年12月24日
    000
  • 两分钟带你了解在CSS中三种使图片居中的方法

    在做网页美化的时候,都会用到图片居中,那你知道在CSS中有哪三种使图片居中的方法吗?下面我们一起看看吧。 1.利用display:table-cell,具体代码如下: html代码如下:   @@##@@ css代码如下: .img_wrap{ width: 400px; height: 300px…

    2025年12月24日 好文分享
    000
  • css优化策略介绍

    css优化,提高性能的方法: (推荐教程:css快速入门) 避免过度约束 避免后代选择符 避免链式选择符 立即学习“前端免费学习笔记(深入)”; 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。一个好的类名应该是描述他是什么,而不是像什么 避免!important,可…

    2025年12月24日
    000
  • 手把手教你CSS如何实现毛玻璃效果

    今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差。就想到了做成毛玻璃的效果,现在分享出来,大家一起看看吧。 页面结构如下: 由于之前用过CSS filter属性,在属性值中使用blur()函数可以起到毛玻璃效果,所以我有2个思路来实现突出登录…

    2025年12月24日
    000
  • 如何清理无用的CSS样式,你知道吗?

    我们在编写CSS样式的时候,往往或遭遇CSS样式的修改或者界面设计的变更,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在着一些无用的样式。 这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。那么有没有一些办法来…

    2025年12月24日 好文分享
    000
  • css中隐藏元素的方法有哪些?有什么区别?

    隐藏元素的方法: (推荐学习:css快速入门) display:none 隐藏对应元素,在文档流中不再给他分配空间,各边元素会合拢但是资源会加载,DOM可以访问。 visibility:hidden 隐藏对应元素,但是在文档流中保留原来的空间,资源会加载。 opacity:0 可以点击,占据空间,可…

    2025年12月24日
    000
  • 一分钟带你了解css兼容ie的写法

    许多同学都在问CSS如何兼容ie浏览器,下面我就来介绍一下css兼容ie的写法,大家一起来看看,如有错误和不足,欢迎指出。 width:auto;是宽度自动的意思。 9是hack css 的一种写法,这种在正常css代码后面加”9″的方式,只有IE浏览器才能识别,其他浏览器会…

    2025年12月24日
    000
  • 2021css常用代码大全

    css常用代码大全 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码。 一.文本设置 1、font-size: 字号参数  立即学习“前端免费学习笔记(深入)”; 2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 color: 参数 …

    2025年12月24日
    000
  • display:inline是什么意思?

    display:inline的意思是设置对象做为行内元素显示,inline是内联对象的默认值,而一般用的div是块级元素,默认display属性是block,但将div的display设置为inline的话,则多个div显示在一行。 display:inline的意思是: 设置对象做为行内元素显示,…

    2025年12月24日
    000
  • style标签怎么用?

    style标签的用法是:1、style标签放在head标签里;2、作为属性放在元素的开始标签中,每个属性值之间使用【;】分开;3、使用属性color,添加style属性的字体颜色。 style标签的用法是: 1、style 属性的作用: 提供了一种改变所有 HTML 元素的样式的通用方法。 样式是 …

    2025年12月24日 好文分享
    000
  • CSS3变形-旋转实现4色花-案例解析(代码实例)

    本文目标: 1、掌握css3中如何让元素旋转 问题: 1、实现以下效果,且使用纯DIV+CSS 附加说明: 1、带蝴蝶的粉色圆圈是一张图片 立即学习“前端免费学习笔记(深入)”; 2、中间的“4色花”是由4个半圆通过旋转生成的,每个半圆的直径为180px 现在来具体操作 1、准备素材:当前案例的素材…

    2025年12月24日
    000
  • 纯 CSS 如何实现鼠标跟随效果?(代码详解)

    鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。通常而言,css 负责表现,javascript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 js。 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。 我们先来看…

    2025年12月24日 好文分享
    000
  • 一文搞懂 flex中的自动 margin

    为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该算是最便捷的了: .g-container { display: flex;} .g-box { margin: a…

    2025年12月24日 好文分享
    000
  • css伪类选择器介绍

    伪类选择器: (推荐学习:css快速入门) 1、link、hover、active、visited a:link(未访问的链接状态),用于定义了常规的链接状态。 a:hover(鼠标放在链接上的状态),用于产生视觉效果。 立即学习“前端免费学习笔记(深入)”; a:active(在链接上按下鼠标时的…

    2025年12月24日
    000
  • css如何垂直对齐容器中的元素

    可以利用css3的transform来实现容器中的元素垂直对齐。 (推荐学习:css快速入门) 具体代码实现: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transfo…

    2025年12月24日
    000
  • 详谈CSS的flex布局(图文介绍)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了。 flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布局的改变,最后再对属性做一个汇总 先看一下flex的基本模型,如下图所示: 立即学习“前端免费学习笔…

    2025年12月24日 好文分享
    000
  • 如何利用纯css实现图片轮播

    实现思路: (推荐学习:css快速入门) 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小为图片大小 立即学习“前端免费学习笔记(深入)”; 给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值 注意事项: 动画效果分为切换和停留两部分 自…

    2025年12月24日
    000
  • 了解css中的关键字initial、inherit、unset、revert和all属性

    在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。而all的取值只能是以上这4个关键字。本文将介绍initial、inherit、unset、revert和all。 initial 表示元素属性…

    2025年12月24日
    000
  • css如何实现模糊背景效果

    普通背景模糊 (推荐教程:css快速入门) 为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。 实现思路: 在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:af…

    2025年12月24日 好文分享
    000
  • 带你玩转css中各种方向小箭头

    在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用。 原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了 梯形代码: html…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信