css根据兄弟元素的内容撑开

2024-11-02

同级兄弟元素之间的CSS控制

为了实现这个导航效果:选中菜单中某一项,隐藏掉自身的左边背景线条,同时让他的下一个兄弟元素也隐藏掉线条. 有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟. 临近兄弟:用 + 表示,只匹配该元素后边的第一个同级元素.普通兄弟:用 - 表示,匹配该元素后边的所有同级元素. 给个例子: <style> div#aa { } div#aa p { font-size: 14px; color: #000; } div#aa p.on { color: #f00; } div#aa p.on ~

使用 CSS 根据兄弟元素的个数来调整样式

在某些场景下,我们需要根据兄弟元素的总数来为它们设置样式.最常见的场景就是,当一个列表不断延长时,通过隐藏控件或压缩控件等方式来节省屏幕空间,以此提升用户体验. 为保证一屏内容能展示更多的内容,需要将多余的列表项隐藏. 二级导航菜单:当菜单项为 1 项时,宽度为 100%:当菜单项为 2 项时,每项宽度为 50%:当菜单项为 3 项时,每项宽度为 33.33333333%:当菜单项为 4 项及以上时,宽度不定,根据内容宽度调整,超出屏幕后滑动菜单查看隐藏的菜单. 不过,对 CSS 选择符来说,基

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法一．DOM 简介由于课程是基于 JavaScript 基础上完成的,这里我们不去详细的了解 DOM 到底是什么. 只需要知道几个基本概念: 1.D 表示的是页面文档 Document.O 表示对象,即一组含有独立特性的数据集合.M 表示模型,即页面上的元素节点和文本节点. 2.D

css选择器兄弟选择器相邻兄弟选择器子元素选择器

1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class="p">我是p元素</p> <strong>我是strong元素</strong> <li>我是li元素</li> /*li元素被选中*/ </div> 2.相邻兄弟选择器: + 该选择器会选择当前元素相邻的第一个兄弟

浅谈css的伪元素::after和::before

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验. 一.概念: 1.定义 The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element.

[转]CSS块级元素和行内元素

原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明.块级元素:显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行,如p,ul,form,div等标签元素.行内元素:元素在一行内水平排列,高度由元素的内容决定,height属性不起作用,如span,input等元素. 一.块级元素:block element 每个块级元素默认占一行高度,一行内

HTML&CSS基础-子元素和后代元素选择器

CSS行内元素

一.典型代表 span a ,strong em del, ins 二.特点: 在一行上显示不能直接设置宽高元素的宽和高就是内容撑开的宽高. <style type="text/css"> span{ /*无效 width: 600px; height: 600px; */ /* color: red;*/ } .box{ width: 500px; height: 500px; background-color: #888; } .box span{ backgrou

[Web 前端] 015 css 三种元素的介绍

1. 块元素,内联元素,内联块元素元素就是标签布局中常用的有三种标签块元素内联元素内联块元素 1.1 块元素也称为行元素布局中常用的标签,如 div.p.ul.li.h1~h6.dl.dt.dd 等等在布局中支持全部的样式如果没有设置宽度,默认的宽度为父级宽度的 100% 盒子占据一行即使设置了宽度,也一样独占一行 1.2 内联元素也称为行内元素布局中常用的标签,如 a.span.em.b.strong.i 等等在布局中支持部分样式,如 margin 的左右值不支

css块级元素

<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线.如果是块级元素那么所显示的的黑线只会在块的下方出现内联元素中只能放内联元素.表现为行布局块元素可以放块元素和内联元素正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的

jquery 元素控制(追加元素/追加内容)

参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: 复制代码代码如下: <div id="content"> <p>在我的后面追加一条新闻</p> </div> Javascript: 复制代码代码如下: <script type="text/javascript&quo

-webkit-box-flex被内容撑开了

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul,li{margin:0;padding:0;list-style:none;} ul{display:-webkit-box;} li{-webkit-box-flex:1;height:100px;background:red;mar

用 CSS 隐藏页面元素

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute 然后将位置设到不可见区域. Opacity,占据网页布局,可以交互,读屏软件可以读到它 opacity 属性的意思是设置一个元素的透明度.它不是为改变元素的边界框(bounding box)而设计的.这意味着将 opacity 设为 0 只能从视觉上隐藏元素.而元素本身依然占据它自己的位

CSS之伪元素

1. :first-line 向元素的首行文本添加样式,不必关心首行是元素节点还是文本节点 <style> body,htm,div,p{ margin:0; padding:0; } div{ width:100px; height:100x; background-color:#FC9; } p{ height:50px; text-align:center; line-height:50px; } div > p:first-child{ background-color:#F90

JQuery_DOM 简介/设置元素及内容

一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM.CSS DOM,大部分都进行了一系列的封装,在jQuery 中并不需要深刻理解它. 3.树形结构用来表示DOM,就非常的贴切,大部分操作都是元素节点操作,还有少部分是文本节点操作. 二.设置元素及内容我们就可以对这些元素进行DOM 的操作.那么,最常用的操作就是对元素内容的获取和修改. <scr

[转]用CSS给SVG <use>的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral --------------------------------------------------------------------------------------------------------------------- 一篇深入探究如何给SVG<use>元素的内容添加样

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 内联元素inline 行框全解

首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起一行框看图说话上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时 ,它定义了该元素中基线之间的最小距离而不是最大距离. line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部. 可以包含这些内容的最小框就是行框line box.[来源] 二框模型继续看图上图代表了CSS中

CSS的伪元素（二）

随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立都要改成新建,这代码量可是不小,当然,如果你这样写<a>建立</a>这改起来是挺麻烦的,而如果你使用伪元素呢?看下面代码:<a class="create"

css根据兄弟元素的内容撑开

热门专题