小编Dan*_*eld的帖子

是否可以选择css生成的内容?

假设我有标记:

<div data-generated="world!">Hello </div>
Run Code Online (Sandbox Code Playgroud)

..带CSS:

div:after {
    content: attr(data-generated);
}
Run Code Online (Sandbox Code Playgroud)

这会产生文本:Hello world!- FIDDLE

div:after {
    content: attr(data-generated);
}
Run Code Online (Sandbox Code Playgroud)
<div data-generated="world!">Hello </div>
Run Code Online (Sandbox Code Playgroud)

但...

如果我尝试选择/复制文本 - 只能选择'hello'部分.

在此输入图像描述

有没有办法选择css生成的文本?

注意:

1)我已查看有关生成内容的规范(此处此处),我没有看到任何对此问题的引用.

这里这里的规范似乎说生成的内容应该是可选择的

生成的内容应该是可搜索的,可选择的,并且可用于辅助技术

2)如果这个问题的答案是"不 - 这是不可能的" - 请链接到一个可靠的来源,说明这一点.

html css selection pseudo-element css-content

31
推荐指数
3
解决办法
3488
查看次数

如何限制模态的高度?

我正在寻找一种方法来保持屏幕边界内的模态对话框,即它的高度始终小于屏幕高度,并相应地调整宽度.我试过了:

.modal-dialog {
  max-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

但这似乎没有任何影响.

http://jsfiddle.net/ma4zn5gv/

举例说明:

在此输入图像描述

如果它存在,我更喜欢纯CSS解决方案(没有js).为了清楚起见,我正在寻找最大高度,而不是高度(即模态不高于屏幕,保持原样).

css responsive-design twitter-bootstrap-3

28
推荐指数
2
解决办法
4万
查看次数

在文本输入上可见溢出,是否可能?

CSS overflow:visible似乎不适用于输入.

请参阅以下JS小提琴:https://jsfiddle.net/b4sr578j/

input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}
Run Code Online (Sandbox Code Playgroud)
<input type='text' value='gggyyyXXX'/>
Run Code Online (Sandbox Code Playgroud)

是否可以使gs和ys的底部可见(不增加文本输入的高度)?

谢谢你的帮助.

html css overflow html-input

18
推荐指数
3
解决办法
1万
查看次数

多项任务混淆

我知道赋值运算符是右关联的.

所以例如 x = y = z = 2相当于(x = (y = (z = 2)))

既然如此,我尝试了以下方法:

foo.x = foo = {a:1}
Run Code Online (Sandbox Code Playgroud)

我期望foo使用value创建对象{a:1},然后x将创建属性,该属性foo将只是foo对象的引用.

(实际上,如果我要将多个赋值语句分成两个单独的语句,会发生什么foo = {a:1};foo.x = foo;)

结果实际上是:

ReferenceError:未定义foo(...)

那么我尝试了以下内容:

var foo = {};
foo.x = foo = {a:1};
Run Code Online (Sandbox Code Playgroud)

现在我不再得到例外但是foo.x未定义!

为什么作业不按我的预期工作?


免责声明:"重复"问题似乎与我提出的问题非常不同,因为问题在于赋值中创建的变量是全局的,与使用var关键字创建的变量相关联.这不是问题所在.

javascript operator-precedence associativity multiple-assignment

15
推荐指数
1
解决办法
274
查看次数

防止伪元素触发悬停?

如果我有标记:

<div class="a b"></div>
Run Code Online (Sandbox Code Playgroud)

其中.a类有一个与之关联的悬停类

并且.b类有一个与之关联的伪元素......就像这样:

div
{
    width: 100px;
    height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background: pink;
}
Run Code Online (Sandbox Code Playgroud)

是否可以使用css来阻止伪元素触发.a类悬停?

小提琴

css hover pseudo-element

14
推荐指数
1
解决办法
6209
查看次数

css删除选择/突出显示文本上的文字阴影(mozilla)

我在大多数文本网站范围内使用文本阴影,但是当您突出显示/选择文本时 - 文本看起来很模糊.所以为了删除文本阴影我从这里使用这个css .

::-moz-selection,
::-webkit-selection,
::selection {
    text-shadow: none;
    background: #333;
    color: #fff;
}
Run Code Online (Sandbox Code Playgroud)

问题是,由于某些原因moz-selection,在mozilla(Firefox)中似乎不再起作用(不再?).

这是jsFiddle

css selection css-selectors css3

13
推荐指数
2
解决办法
4万
查看次数

目标最后一排?

我有一个简单的列表,列表项没有任何特殊类.

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  etc..
</ul>
Run Code Online (Sandbox Code Playgroud)

在前端看起来像这样:

在此输入图像描述

我希望能够定位li每行中的最后一行(以绿色突出显示的那一行).但是,我不确定,因为这些li没有任何类,并且取决于用户的屏幕,它可能是一个不同的li,最终连续排在最后.有没有办法瞄准li连续的最后一个?

编辑:我认为有一些混乱.所有li物品都在一个ul.

javascript css jquery html-lists

13
推荐指数
1
解决办法
1999
查看次数

Firefox隐藏没有内容且没有设置高度的表

我有空tabledivdisplay:table:

如果我现在为表添加边框 - 即使没有内容 - 我希望看到边框.

在Chrome和IE中有边框.在Firefox中 - 边框占用空间,但它是隐藏的.

DEMO

table,
div {
  width: 200px;
  background: tomato;
  margin-bottom: 20px;
  border: 2px solid black;
}
div + div,
table + table {
  background: green;
  height: 200px;
}
div {
  display: table;
}
Run Code Online (Sandbox Code Playgroud)
<div></div>
<div></div>

<table></table>
<table></table>
Run Code Online (Sandbox Code Playgroud)

同样,我甚min-height至可以添加一个表 - Chrome和IE都尊重min-height属性,但Firefox仍然完全隐藏了表.

DEMO

因此,为了使表在Firefox中获得高度 - 表需要内容或设置高度.

所以我想知道:这是一个firefox错误,还是规范中有一个有效的原因/来源,隐藏了没有内容或设置高度的表.

html css firefox cross-browser css-tables

13
推荐指数
1
解决办法
825
查看次数

头部内的锚标签?

我希望我的网站有资格使用Google+ Direct Connect.

所以在谷歌搜索后,我找到了这个谷歌支持页面,该页面已被编辑.
查看通过WayBack Machine提供以下说明的Google支持页面:

您可以通过在您的网站上插入一小段代码直接关联您的网站,然后在该个人资料的"关于"部分中将该网站列为您的Google+信息页的主要链接.例如,如果您的Google+信息页的主要链接设置为www.pagewebsite.com,则可以通过将以下代码段放在网站的HTML标记中来创建 bidrectional 链接<head>:

<a href="https://plus.google.com/{+PageId}" rel="publisher" />
Run Code Online (Sandbox Code Playgroud)

是什么赋予了?头部内的锚标签?

我以为头部只允许使用title/meta/link标签.

将上面的片段放在head标签中是否合法?

html semantic-markup

11
推荐指数
1
解决办法
2574
查看次数

Atom编辑器:如何快速前进

我已经习惯了PHP Storm,你可以轻松地跳回到前面光标所在的位置.原子编辑器中有这样的功能吗?

atom-editor

11
推荐指数
2
解决办法
1万
查看次数