小编Dan*_*eld的帖子

我有以下html:

<div class="x">
    <div class="y" title="aaaaa">
        <a href="/">
            aaaaa
        </a>
    </div>
    <div class="y" title="bbbbbb">
        <a href="/">
           bbbbbb
        </a>
    </div>
    <div class="y" title="ccccc">
        <a href="/">
            ccccc
        </a>
    </div>
    <div class="y" title="dddddddd">
        <a href="/">
            dddddddd
        </a>
    </div>
</div>

用css:

.x{
    width: 10em;
    background-color: #FFB9B9;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}
.y {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;    
    background-color: #E1CECE;
    display: inline-block;
}

你可以在这里看到:http://jsfiddle.net/fDBbm/

省略号从一开始就在Firefox(16.0.2)中工作,但在Chrome(22.0.1229.94)中没有.

有没有办法使用较少的css calc()例程？

如果我去http://less2css.org/ 并输入以下输入(这只是一个常规的CSS规则):

width: calc(100% - 450px);

输出应该完全相同(因为它是常规的css)但是,

编译器产生的css输出是 width: calc(-350%);

有没有办法让这个工作？

这是一些非常简单的标记和CSS:

a {
  color: red;
}
a:link {
  color: green;
}

<a href="#">one</a>
<a href="">two</a>
<a href>three</a>
<a>four</a>

小提琴

现在来自规范:

在HTML4中,链接伪类适用于具有"href"属性的A元素.

所以我希望前三个链接是绿色的.

但不,结果实际上只有非空的第一个链接href是绿色.

所以我使用了inspect元素,我看到a:link选择器实际上覆盖了a所有前三种情况中的选择器,但由于某种原因只在第一种情况下应用了样式.

这里发生了什么？

还有一件事,当我测试各种浏览器时,我注意到Chrome,Firefox和IE11都产生了相同的结果,除了在Firefox中,当我重新加载(相同)代码时(在小提琴中只需单击"运行") - 所有前3个元素突然变绿.

有任何想法吗？

How do I limit the height of the dropdown of a select element - so that if the total amount of options is greater than this height - I should get a scroll in the dropdown. I'd be satisfied if I could do this in terms of pixels or number of items.

所以说我有以下html标记:

<select>
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option> …

该规范对于计算CSS具体规定:(粗体雷)

注意:允许重复出现相同的简单选择器,并增加特异性.

因此,例如,.class.class {}具有两倍的特异性比.class {}- DEMO

但是,关于术语" 简单选择器 " ,规范有这样的说法:(大胆的)

一个简单的选择器是一个类型选择器或通用选择器,后面紧跟零个或多个属性选择器,ID选择器或伪类,任何顺序.

所以,既然规范说允许重复出现相同的简单选择器 - 这意味着你也可以重复类型选择器.

那么很明显这样的事情是行不通的:h1h1 { },

所以我试过这个:h1[]h1[] {}- 哪个也不起作用,

所以我想知道是否有办法做到这一点？

.roles span {
  display:inline-block;
  width:80px;
}

<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

我display:inline-block;用来把span文字放在我的img旁边.但是,图像位于我的跨度的左下方.

如何使它们水平？

据我所知,逻辑AND &&运算符的短路效果如下:

假设我有表达a并且b然后a && b是一样的a ? b : a,因为

如果a是真的那么结果将是b,如果a是假的那么结果将是a(甚至没有试图解决b)

这就是为什么以下(演示)代码抛出一个SyntaxError:

var add = function(a,b) {
  b && return a+b; // if(b) return a+b
  ...
}

有没有办法与return语句短路？

HTML

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

SCSS

ol {
  counter-reset: item;
  li {
    display: block
  }
  li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
  }
}

现在列表的排序如下:

1. ITEM1

1.1.ITEM2

2. ITEM1

2.1.ITEM2

2.2.项目3

有没有什么方法可以在列表的开头增加一个级别的排序？第二个<ol>开始于2:2.1.ITEM1

1.1.ITEM1

1.1.1.ITEM2

1.2.ITEM1

1.2.1.ITEM2

1.2.2.项目3

-------同一父母的第二名---------

2.1.ITEM1

2.1.1.ITEM2

2.2.ITEM1

2.2.1.ITEM2

2.2.2.项目3

笔在这里:http://codepen.io/simPod/pen/wawOLd

我已经在我的网站上使用了颜色主题,例如我有一个标准的十六进制颜色,用于链接状态regular/hover/active.

现在我想在LESS中使用颜色操作 color:darken(@base_color, x%);

所以我的问题是:

如果在'变暗'操作后我知道我的基色和输出颜色,

我怎么知道什么%给出变暗操作来产生我的输出颜色？

例如:如果我要去#952262 - >#681744我的百分比是多少？

也许有一个网站可以进行这些转换？

希望答案不是'试验和错误'.

有没有办法隐藏列表,如果它只包含一个元素只使用CSS？奖励:想想IE8

<ul>
  <li>hide this</li>
<ul>

但:

<ul>
  <li>show this</li>
  <li>and others...</li>
</ul>

我正在玩所有兄弟姐妹和下一个选择器(~ +)但没有办法选择以前的CSS元素:(