在css中多层元素的选择使用后代选择器,错误写法

CSS后代选择器可能的错误认识

一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class="red&qu

HTML和CSS设置动态导航以及CSS中伪元素的简单说明

HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javasc

CSS中的元素分类元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和非替换元素. 替换元素替换元素就是浏览器根据元素的标签

转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误

标准参考元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute"."fixed"."relative" 之一的祖先元素组成:如果这个祖先元素不存在,则包含块由根元素组成. 绝对定位元素的定位绝对定位元素的定位,依赖于其包含块.也就是说,当绝对定位元素的 "top"."left" 值被设置之后,

关于CSS中的元素定位

---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. 一切皆为框 div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它

CSS中设置元素的圆角矩形

圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一个值为左上.第二个值为右上.第三个值为左下.第四个值为右下. 假如border-radius属性值都是一致的我可以设置一个属性值即可. 圆角矩形实践圆角矩形基本使用方式 <!DOCTYPE html> <html lang="en"> <head> &

CSS中隐藏元素的常用方法

在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none; 让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面检查器中,显示body中没有元素内容. 将元素的display属性值设置为none,那么这个元素在页面中不会占据任何尺寸,就像元素完全不存在. 这个元素的所有后代元素也会一同消失.对display属性值设置为none的元素添加动画,过渡效果无效. 适用场景:留言板,评论区等一开始需要隐藏,当用户做

css中伪元素before或after中content的特殊用法attr【转】

[原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入. 插入纯文字 content:"插入的文章",或者content:none不插入内容html: <h1>这是h1</h1> <h2>这是h2</h2>

CSS3 nth-child的使用，详解css中nth的作用，以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html结构如下: <div class="demo"> <p></p> <p></p> <p></p> <p></p> </div> 只选取第2个元素 .demo p:nth-

CSS中关于多个class样式设置的不同写法

html中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="containerB"> 这是BBBBBBBBBBBBBBBBBBBBBB样式 </div> </div> css中: .containerA .containerB { color: red; font-size: 28px;} .containerA ,.container

css中 Span 元素的 width 属性无效果原因及多种解决方案

先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout .而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 he

对css中clear元素的理解

clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高 . 当所有元素的clear属性都设为right时,由于优先级的原因,并不是所想的那样:右侧没有浮动元素,而是右侧出现了浮动元素. 比如下面的代码: <html> <head> <style type="text/css

浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式.不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1.水平居中(margin:0 auto;) 关于这个,大家应该是最不陌生的,不管是在培训班还是自己自学的话 .这个应该是老师讲的第一个方法了(水平方向上),但是其有一个前提,就是被包裹的元素不能有浮动的属性.否则的话这个属

CSS选择器的组合选择器之后代选择器和子元素选择器

实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div h1{ /*div下的h1标签的样式*/ color:green; font-size:30px; font-style:italic; }

css中span元素的width属性无效果原因及多种解决方案

先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout .而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 he

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the first!</div> <div class="two">I'm the second!</div> </div> css: .one{ width: 100px; height: 100px; background: red; margin-t

css中伪元素before或after中content的特殊用法attr

html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css">haorooms测试</span> </div> css代码如下: .haorooms{margin-top:30px} span{ position: relative; display: inline-block; } span:hover{ cursor: po

css中a元素放长英文字母或者数字自动换行的解决

在做链接分享页面的时候遇到a元素中的下载链接长英文溢出不换行的问题在给他以及他父元素设置宽度依然没有解决这个问题最后解决办法给元素加上word-wrap:break-word 解释:使用break-word时,是将强制换行.

CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的内容自动适应的. 亦或者在子元素的最后一个清楚浮动.

在css中父元素不固定高度，怎样实现子元素的高度100%

父元素使用 position: relative; 子元素使用 position: absolute; height: 100%;

css中块元素和行内元素区别

行内元素特点 1.和其他元素都在一行上: 2.元素的高度.宽度.行高及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. 块元素特点 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(真霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度.

在css中多层元素的选择使用后代选择器,错误写法

热门专题