是否可以将css(3)样式应用于选中的单选按钮的标签？

我有以下标记:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望是那样的

label:checked { font-weight: bold; }

会做点什么,但唉它没有(正如我预期的那样).

是否有可以实现此类功能的选择器？如果有帮助,您可以使用div等环绕,但最好的解决方案是使用标签''for''属性.

应该注意的是,我能够为我的应用程序指定浏览器,所以请最好使用css3类等.

是否可以在不影响子元素不透明度的情况下设置背景图像的不透明度？

例

页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

我试过的

我尝试将列表项的不透明度设置为50%,但是链接文本的不透明度也是50% - 并且似乎没有办法重置子元素的不透明度:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

我也尝试过使用rgba,但这对背景图片没有任何影响:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, …

任何方式只能在没有黑客或图像的情况下在左右(水平？)侧获得盒子阴影.我在用:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

但它带来了阴影.

我的元素没有边界.

我正在尝试使用css悬停在缩略图上进行转换,以便在悬停时,背景渐变淡入.转换不起作用,但如果我只是将其更改为rgba()值,则可以正常工作.是否不支持渐变？我也尝试使用图像,它也不会转换图像.

我知道这是可能的,就像在另一篇文章中有人做过的那样,但我无法弄清楚究竟是怎么回事.任何帮助>这里有一些CSS可以使用:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.

我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)

但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).

这是示例代码的链接(高度简化)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px; …

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

对于CSS3中具有以特定字符串开头的类名的元素,是否可以使用"通配符"？

例如.:

<div class="myclass-one"></div>
<div class="myclass-two></div>
<div class="myclass-three"></div>

然后神奇地将以上所有divs一次性设置为红色:

.myclass* { color: #f00; }

使用以下HTML,将列表显示为两列的最简单方法是什么？

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

期望的显示:

A B
C D
E

该解决方案需要能够在Internet Explorer上运行.

我正在使用弹性框显示8个项目,这些项目将动态调整我的页面大小.如何强制它将项目分成两行？(每行4个)？

这是一个相关的剪辑:

(或者,如果你更喜欢jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

我想淡出一个元素(将其不透明度转换为0),然后在完成时从DOM中删除元素.

在jQuery中,这是直截了当的,因为您可以在动画完成后指定"删除".但是,如果我希望使用CSS3过渡动画,那么无论如何都要知道过渡/动画何时完成？