css first-child 有没有Second

2024-11-05

前端css 同级元素设置不同样式 :first-child :nth-child() 的操作收藏

说明:最近在写前端vue 调样式的时候遇到了一个问题同一个div下对多个同级别的<span>标签进行边距设置 <div class="shuju-div"> <span>数据A</span> <span>数据B</span> <span>模型C</span> <span>模型D</span> <span>模型E</span> <sp

3.CSS使用基础(2)

目录一.CSS 链接二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型五.CSS Border(边框) 六.CSS 轮廓(outline)属性七.CSS Margin(外边距) 八.CSS Padding(填充) 九.CSS 分组和嵌套十.CSS组合选择符十一.CSS伪类十二.CSS伪元素十三.导航栏十四.CSS下拉菜单十五.CSS图片廓十六.图片透明与不透明十七.CSS图片拼合技术十八.CSS媒体类型十九.CSS属性选择器二十.CSS实例

css总结13：CSS 伪类(Pseudo-classes)

1 伪类作用:CSS伪类是用来添加一些选择器的特殊效果. 2 常用示例: 2.1anchor伪类:代码: 正常语法: a{color:#FF0000;}/* 文字颜色 */ 伪类语法: a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */

CSS：CSS 伪类(Pseudo-classes)

ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示实例 a:link

CSS之垂直水平居中的背后

最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每当需要说更多的时候我都简单阐述后一笔带过,然后附上参考资料.后面若是写css系列的时候再详细讲吧. 其实这道面试题,真的考察很多东西,个人理解它属于开放类型的问题,没有指定范围的答案,所以它就可以涉及到很大范围的知识概念,并且以此判断开发者对技术理解的深度和宽度.那么要解决这个问题,最大的难点在于分

ie使用firebug

在网页插入以下代码即可. <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> https://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js var firebug={version:[1.231,

如何消除inline-block产生的元素间空隙

前端初学者可能都会碰到这个问题:有时候排版需要,会把一些块状元素的display属性设置为inline-block,如  <div class="parent"> <div class="child">child</div> <div class="child">child</div> <div class="child"

JQUERY-定义-查找

正课: 1. 什么是jQuery 2. 如何使用jQuery 3. 查找 1. 什么是jQuery 第三方开发的执行DOM操作的极简化的函数库第三方: 下载执行DOM操作: 学习jQuery,还是在学DOM 极简化: jQuery是DOM操作的终极简化: 4个方面: 1. 增删改查 2. 事件绑定 3. 动画 4. Ajax 函数库: jQuery中一切都是函数为什么: 2个原因: 1. 终极简化 2. 解决了大部分浏览器兼容性问题: 凡是jQuery让用的,都没有兼容性问题如果不

浅谈BFC和IFC

先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作用.BFC和IFC都是常见的FC. 分别叫做Block Fomatting Context 和Inline Formatting Context. BFC BFC(Block Formatting Context)叫做"块级格式化上下文".BFC的布局规则例如以下: 1.内部的盒子会在垂直

Django 2.0 学习(13)：Django模板继承和静态文件

Django模板继承和静态文件模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中的全部元素,并且可以定义能够被子模板覆盖的blocks.为了容易理解模板继承,我们先写一个模板: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

less 语法

1 变量 less的变量使用@开头 1.1 demo @colorRed:red; @colorBlue:blue; .demo{ color:@colorRed; background-color:@colorBlue; } 对应的css: .demo{ color:red; baclground-color:blue; } 1.2 甚至可以在定义变量值时使用其它的变量: @name:"zhang san"; @info:"name"; .demo11{ &

div水平垂直居中的六种方法

在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现. 方法一: 绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) 图片展示: 代码如下: div{ background:red; position: absolute; left:50%; top:50%; transform: translat

511,display:inline-block什么时候不会显示间隙？

(百科: 在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block,但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”. display:inline:强制变成行内元素 display:block:强制变成块元素而display:inline-block:顾名思义就是行内块的意思了,他具备了行内元素不换行的特征,同时也有块元素可以设置宽高的特征) 移除空格

Matplotlib数据可视化（3）：文本与轴

在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]

Position a child div relative to parent container in CSS: [设置子DIV位置跟父DIV相关联]

最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-position-child-div-parent/] 如何让子div的位置相对父div的位置固定,而父div的位置可以变动. 重点是:父div一定要有position属性(不管relative还是absolute),子div就可以设置position:absolute,这时子div的位置是相对父div

CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器只作用于html等底部标签.很少用 .. :root 2. 子元素选择器子元素全选还要更细致 ul>li:first-child{ } 增加伪类firs

I do not want to inherit the child opacity from the parent in CSS(不想让子元素继承父元素的透明度)

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency. So instead of: background-color: rgb(0,0,255); opacity: 0.5; use background-color: rgba(0,0,255,0.5);

浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现该对象.但是IE6 和IE7 不支持 outline 属性.所以,它不能在这两个浏览器中用于调试. <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { w

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型所有题目汇总在我的 Github . 3.层叠顺序(stacking level)与堆

CSS垂直居中的11种实现方式

今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常的开发过程中总结得到,如发现和您的观点确有雷同之处,那么实在荣幸能和前辈们英雄所见略同!) 另:这里的demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器. 11种实现方式分别如下: 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码: <div id="bo

CSS 3 学习——transform 3D转换渲染

以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其他元素也共享这个平面.2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染. 3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0.结果是把元素渲染到一个不同于其包含块所处的平面内.这将影响到通常情况下的"后来居上"的渲染规则:变换元素可能会和其相

css first-child 有没有Second

热门专题