小编Dan*_*eld的帖子
推荐指数
解决办法
查看次数
使用纯CSS隐藏包含一个元素的列表
有没有办法隐藏列表,如果它只包含一个元素只使用CSS？奖励:想想IE8
<ul>
<li>hide this</li>
<ul>
但:
<ul>
<li>show this</li>
<li>and others...</li>
</ul>
我正在玩所有兄弟姐妹和下一个选择器(~ +)但没有办法选择以前的CSS元素:(
推荐指数
解决办法
查看次数
表边框折叠无法使用内联块？
此示例以两种不同的方式显示两个表.在第一种情况下,一张桌子在另一张桌子之上.在第二个,它们是并排的.两种情况之间的唯一区别是人们使用display: inline-block; 另外,在第一种情况下,表格<DIV>用a 分隔padding-bottom,而在第二种情况下,它们<SPAN>用a 分隔padding-right.
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
table { border-collapse: collapse; border-style: solid; border-width: thin }
col { border-style: dotted; border-width: thin }
td { padding-left: 0.05in; padding-right: 0.05in }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<COL><COL><COL><COL><COL><COL>
<TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
<DIV style="padding-bottom: 1em"></DIV>
<TABLE>
<COL><COL><COL><COL><COL><COL>
<TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
<DIV style="padding-bottom: 3em"></DIV>
<TABLE style="display: inline-block">
<COL><COL><COL><COL><COL><COL>
<TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
<SPAN style="padding-right: 3em"></SPAN>
<TABLE style="display: inline-block">
<COL><COL><COL><COL><COL><COL>
<TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
</BODY>
</HTML>
CSS2规范的17.6.2.1 说明了解决折叠边界模型中的边界冲突:
如果没有一个样式是"隐藏的"并且其中至少有一个不是"无",那么将丢弃窄边框以支持更宽的样式.如果有几个具有相同的'border-width',则按此顺序首选样式:'double','solid','dashed','dotted','ridge','outset','groove'和最低: "插页".
这似乎是在第一种情况下工作,其中实心边界胜过表格边缘周围的虚线边界.但在第二种情况下,看起来两个 …
推荐指数
解决办法
查看次数
为什么宽度不覆盖最大宽度
如果我有以下代码
<div></div>
div
{
background: pink;
height: 100px;
max-width: 20px;
width: 200px;
}
结果是一个宽度为 20px 的 div。（即使我添加!important到宽度值）
为什么这里的 width 属性不覆盖 max-width ？
推荐指数
解决办法
查看次数
通过css替换img的内容
我有这个图片标签:
<img src="http://placehold.it/200x200"/>
我需要通过css替换图像(因为我无法编辑html),所以我使用这个css:
img {
content: url('http://lorempixel.com/200/200');
}
它在chrome上工作得很好,但在firefox中没有工作,也就是说,任何想法为什么？
推荐指数
解决办法
查看次数
在媒体查询中使用LESS变量
当我输入以下较少的代码时:(将其粘贴到http://less2css.org)
@item-width: 120px;
@num-cols: 3;
@margins: 2 * 20px;
@layout-max-width: @num-cols * @item-width + @margins;
@media (min-width: @layout-max-width) {
.list {
width: @layout-max-width;
}
}
...生成的CSS是:
@media (min-width: 3 * 120px + 40px) {
.list {
width: 400px;
}
}
请注意,同一个变量@layout-max-width- 在媒体查询中它产生一个表达式(这不是我想要的),当用作width属性的值时,它产生400px(这也是我想要的媒体查询.)
LESS中是否有正式语法使我能够这样做？
如果没有 - 有解决方法吗？
推荐指数
解决办法
查看次数
原型上的属性会覆盖实际对象的属性吗？
我有一个Person类似构造函数的方法sayHello
var Person = function(firstName,lastName) {
this.lastName = lastName;
this.sayHello = function() {
return "Hi there " + firstName;
}
};
然后我在原型上定义了一个不同版本的sayHello方法Person:
Object.defineProperties(Person.prototype,{
sayHello: {
value: function() {
return 'Hi there';
},
enumerable: true
}
});
现在,如果我创建一个Person实例并在其上调用sayHello - 我注意到它正在使用在原型上定义的sayHello版本.
var JoeBlow = new Person('Joe','Blow');
> JoeBlow.sayHello()
< "Hi there" // I was expecting "Hi there Joe"
这对我来说很困惑.
为什么JoeBlow对象不使用自己的sayHello实现,而不是在其原型对象上查找sayHello？
推荐指数
解决办法
查看次数
属性描述符对象存储在哪里？
我知道,你可以得到一定的财产"的属性描述对象prop的某个对象的" obj有
Object.getOwnPropertyDescriptor(obj,"prop");.我只是想知道:这些物品存放在哪里？它们是在内部存储在一个对象中还是......在其他地方 我试图在开发人员工具中找到它们,但没有运气.
推荐指数
解决办法
查看次数
如何仅使用css隐藏一个选项元素
<select class="Select-input">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
我想只隐藏上面代码中的值四.
我尝试使用{display:none}作为值-4,但它不起作用.
还想在这个元素之间添加填充一,二,三和四.
PS我想只使用CSS删除它.
推荐指数
解决办法
查看次数
带有flexbox布局的大型第一项？
我有一个布局,包含一个包含一堆项目的有序列表.
所有项目都具有一致的宽度和高度 - 除了第一项 - 宽(3x)和(2x)更高.它看起来像这样:
ol {
padding:0;
margin:0;
min-width: 488px;
}
li {
list-style: none;
width: 150px;
padding-bottom: 16.66%;
border: 5px solid tomato;
display: inline-block;
}
li:first-child {
float:left;
width: 478px;
border-color: green;
padding-bottom: 34.25%;
margin: 0 4px 4px 0;
}<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>Codepen演示(调整视口大小以查看效果)
目前,我正在使用浮动和内联块来实现布局,但我想使用flexbox,因为flexbox提供了一些额外的功能.
我做了几次尝试,但没有成功 -
尝试#1 - Codepen
ol {
/* ... */
display: flex;
flex-wrap: …推荐指数
解决办法
查看次数