Tag: CSS

哪些字符在CSS类名/select器中有效?

CSS类select器中允许使用哪些字符/符号? 我知道以下字符是无效的 ,但是什么字符是有效的 ? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

为什么不弹性项目收缩过去的内容大小?

我有4个flexbox列,一切正常,但是当我添加一些文本到列,并将其设置为一个大的字体大小,这是由于flexbox设置,使列比应该是更广泛。 我试图使用word-break: break-word ,它帮助,但是,当我调整列的宽度非常小时,文本中的字母被分成多行(每行一个字母),但是列没有得到小于一个字母的宽度。 尝试观看这个video: http : //screencast-o-matic.com/watch/cDetln1tyT (在开始,第一列是最小的,但当我调整窗口,这是最宽的列。我只是想尊重柔性设置总是..弹性尺寸1:3:4:4) 我知道,设置字体大小和列填充到更小将有助于…但有没有其他解决scheme? 我不能使用overflow-x: hidden 。 JSFiddle: https ://jsfiddle.net/78h8wv4o/3/ .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } […]

在使用jQuery之后select和操作CSS伪元素,如:: before和::

有没有办法使用jQueryselect/操作CSS伪元素,如::before和::after (以及带有一个分号的旧版本)? 例如,我的样式表有以下规则: .span::after{ content:'foo' } 我如何使用jQuery将“foo”更改为“bar”?

在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?

考虑柔性容器的主轴和交叉轴: 来源: W3C 要沿主轴alignment弹性项目,有一个属性: justify-content 要沿着横轴alignment弹性项目,有三个属性: align-content align-items align-self 在上图中,主轴是水平的,横轴是垂直的。 这些是flex容器的默认方向。 但是,这些方向可以很容易地与flex-direction特性互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; (横轴始终垂直于主轴。) 我在描述斧头的工作方面的重点是,在任何一个方向似乎都没有什么特别之处。 主轴,横轴,重要性和flex-direction都相等,方便来回切换。 那么为什么十字轴会有两个额外的alignment属性? 为什么align-content和align-items合并到主轴的一个属性中? 为什么主轴不能得到一个justify-self财产? 这些属性将是有用的scheme: 将柔性物品放置在柔性容器的拐angular处 #box3 { align-self: flex-end; justify-self: flex-end; } […]

代码和标记示例图像问答

在准备涉及图像的MCVE / SSCCE时 ,直接访问图像是有用的。 涵盖大多数问题的图像types是 – 多种颜色或形状的小图像,有/无透明度的animationGIF,图像“成对”的JPEG,可用于图像转换,拼贴集,精灵图纸。 是否有任何小的(30KB以下),现场的,许可证和免版税的图像,我们可以热点链接到这些types的例子?

有没有“以前的兄弟”CSSselect器?

+是为下一个兄弟。 前面的兄弟姐妹有没有相同的东西?

为什么不在HTML中使用表格进行布局?

似乎普遍认为表格不应该用于HTML中的布局。 为什么? 我从来没有(或者很less说实话)看到这个好的论点。 通常的答案是: 从布局分离内容是很好的 但这是一个错误的论点; 陈词滥调 。 我想这是真的,使用表格元素的布局与表格数据很less。 所以呢? 我的老板照顾吗? 我的用户关心吗? 也许我或我的开发人员必须维护一个网页护理…是不是一个表维护? 我认为使用表格比使用div和CSS 更容易 。 顺便说一下…为什么要使用div或span来完美地区分布局和表格中的内容呢? 只有div才能获得良好的布局,往往需要大量的嵌套div。 代码的可读性 我认为这是相反的。 大多数人理解HTML,很less理解CSS。 SEO最好不要使用表格 为什么? 任何人都可以certificate这是一个证据吗? 或从谷歌的声明,从SEO的angular度来看,表格是不鼓励的? 表格较慢。 一个额外的tbody元素必须被插入。 这是现代网页浏览器的花生。 给我看一些使用表格显着减慢页面的基准。 如果没有桌子,布局检修更容易,请参阅禅宗花园 。 大多数需要升级的网站也需要新的内容(HTML)。 新版本的网站只需要一个新的CSS文件的情况不太可能。 禅园是一个不错的网站,但有点理论。 更不用说它滥用 CSS了。 我真的很感兴趣的是使用div + CSS而不是表格。

如何在另一个<div>中水平居中<div>?

我怎样才能水平居中使用CSS的另一个<div>一个<div> (如果它甚至可能)? <div id="outer"> <div id="inner">Foo foo</div> </div>

如何去除内嵌块元素之间的空间?

鉴于这个HTML和CSS: span { display:inline-block; width:100px; background-color:palevioletred; } <p> <span> Foo </span> <span> Bar </span> </p> 因此,SPAN元素之间会有4px的空间。 演示: http : //jsfiddle.net/dGHFV/ 我明白为什么会发生这种情况,而且我也知道可以通过删除HTML源代码中的SPAN元素之间的空白来消除该空间,如下所示: <p> <span> Foo </span><span> Bar </span> </p> 但是,我希望有一个不需要HTML源代码被篡改的CSS解决scheme。 我知道如何用JavaScript解决这个问题 – 通过从容器元素(段落)中删除文本节点,如下所示: // jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove(); 演示: http : //jsfiddle.net/dGHFV/1/ 但是,这个问题可以用CSS来解决吗?

有一个CSS父母select器?

如何select作为锚元素的直接父元素的<li>元素? 在例子中,我的CSS会是这样的: li < a.active { property: value; } 很显然,有这样的JavaScript的方法,但我希望有一种解决scheme,原生存在的CSS级别2。 我正在尝试的样式菜单是由CMS发出的,所以我不能将活动元素移动到<li>元素中(除非我主题菜单创build模块,我不想这样做)。 有任何想法吗?