小编Jam*_*lly的帖子

是否有可能在伪元素中有一个伪元素?

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }
Run Code Online (Sandbox Code Playgroud)

我的语法错误还是伪元素中的伪元素不受支持?

请注意,我知道::after伪元素,虽然我需要在另一个伪元素中实现一个实际元素,例如,哪里::after不足够:

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: …
Run Code Online (Sandbox Code Playgroud)

css css-selectors css3 pseudo-element

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

否定:在绝对定位元素的z-index之前,IE8中不起作用

我已经搜索过这个问题,并且知道IE8有​​使用伪标签渲染元素的怪癖,但无法找到我的问题的解决方案.我试图绝对定位一个元素并在其中添加一个伪:before元素,它必须位于其父元素之下.

使用:

.container:before {
    z-index: -1;
}
Run Code Online (Sandbox Code Playgroud)

使用Firefox和Chrome进行操作但不在IE上; 这是小提琴http://jsfiddle.net/WaTnn/

如何在IE8中将黄色元素定位在红色下面并且仍然将它的父级置于绝对位置?

css z-index css-position internet-explorer-8 pseudo-element

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

右对齐CSS之前:数字?

我希望编号段落而不是使用有序列表.我试图通过在CSS中使用内容:counter(段落)来实现这一点,这样我创建的每个段落块都会在其左侧生成一个数字.

.pass {
  counter-reset:paragraph;
}

.pass p:before {
  content:counter(paragraph);
  position:absolute;
  font-size:0.6em;
  color:#999;
  margin-left:-3em;
  counter-increment: paragraph;
}
Run Code Online (Sandbox Code Playgroud)

它工作正常,但问题是我无法弄清楚如何对齐数字,使它们都对齐.

所以代替:

7   Content
8   Content
9   Content
10  Content
Run Code Online (Sandbox Code Playgroud)

我希望它们看起来像这样:

 7  Content
 8  Content
 9  Content
10  Content
Run Code Online (Sandbox Code Playgroud)

有没有办法在没有OL和LI的情况下实现这一目标?

css pseudo-element css-content

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

样式输入字段看起来像梯形

我正在尝试为客户端创建自定义样式的文本字段。

他们想要一个梯形输入字段。

这是我到目前为止所做的:

的HTML

<input type="text">

的CSS

input{
    background: #ccc;
    color: #000;
    border-bottom: 50px solid #ccc;
    padding-top:5px;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    height: 0px;
    width: 200px;
}
Run Code Online (Sandbox Code Playgroud)

小提琴

关于如何或是否可以进行以下操作的任何想法: 这个

html css

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

如果用媒体查询替换背景图像会加载吗?

我正在创建一个响应式设计,因此我的网站在桌面和移动设备上都能很好地查看.在我的网站上,我的一个div上有一个相当大的背景图像.

现在我一直想知道的是:我的div上的背景图像是否被媒体查询中的颜色替换?

例:

div {
    background: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {

    div {
        background: #000;
    }
}
Run Code Online (Sandbox Code Playgroud)

css background-image media-queries responsive-design

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

jquery - 选中复选框时显示文本框

我有这个表格

<form action="">
  <div id="opwp_woo_tickets">
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

截至目前,我正在使用此jquery代码在复选框选中时显示文本框.

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
        if ($(this).is(':checked')) $('div.max_tickets').show();
        else $('div.max_tickets').hide();
    }).change();
});
Run Code Online (Sandbox Code Playgroud)

它工作正常,但它会在选中时显示所有文本框.

有人可以帮我解决吗?

这是我的问题的演示.

http://codepen.io/mistergiri/pen/spBhD

html javascript jquery

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

Bootstrap 6列响应

我正在为我的设计使用Bootstrap布局,并且即将使其响应并节省所需的订单.例如,如下:

<div class="row">
   <div class="col-sm-4 col-md-2" >div1</div>
   <div class="col-sm-4 col-md-2" >div2</div>
   <div class="col-sm-4 col-md-2" >div3</div>
   <div class="col-sm-4 col-md-2" >div4</div>
   <div class="col-sm-4 col-md-2" >div5</div>
   <div class="col-sm-4 col-md-2" >div6</div>
</div>
Run Code Online (Sandbox Code Playgroud)

在md - viewports我会这样:

div1 div2 div3 div4 div5 div6 
Run Code Online (Sandbox Code Playgroud)

在sm视口:

div1 div2 div3
div4 div5 div6
Run Code Online (Sandbox Code Playgroud)

我怎么能重新排序列在sm-viewports上这样:

div1 div3 div5
div2 div4 div6
Run Code Online (Sandbox Code Playgroud)

换句话说 - 每个偶数列都必须向下,每个奇数列都要保持不变.可能吗?

html css responsive-design twitter-bootstrap twitter-bootstrap-3

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

下拉菜单的输入验证错误CSS

(好的,这可能是重复的,但搜索没有引导我任何帖子,所以如果有帖子那么提前道歉)

我有一个列出字符串的下拉列表,默认为Please Select.如果用户提交表单,请选择仍然选中,模型状态失败,并指出错误.(好)但是,我想要一个红色边框以及错误出现.css是

 input.input-validation-error { border: 1px solid #f00; background-color: #fee; }
 textarea.input-validation-error { border: 1px solid #f00; background-color: #fee; } 

 // is it as easy as this? I am guessing its not "dropdown" or is a 10x more complicated?
 dropdown.input-validation-error { border: 1px solid #f00; background-color: #fee; }  
Run Code Online (Sandbox Code Playgroud)

那么如何将红色边框放在下拉菜单周围?

以下是强类型下拉列表的示例

@Html.DropDownListFor(m => m.test.id, new SelectList(Model.test.list, "Id", "Name"), "Please Select")
Run Code Online (Sandbox Code Playgroud)

谢谢

css asp.net-mvc

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

获取对 Highcharts 图表的引用

我在一个带有 id 的 div 中渲染一个 Highcharts 图表,container如下所示:

new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        zoomType: 'x'
    },

    xAxis: {
        categories: ['Jan', 'Feb']
    },

    series: [{
        data: [29.9, 71.5]
    }]
});
Run Code Online (Sandbox Code Playgroud)
new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        zoomType: 'x'
    },

    xAxis: {
        categories: ['Jan', 'Feb']
    },

    series: [{
        data: [29.9, 71.5]
    }]
});
Run Code Online (Sandbox Code Playgroud)

请注意,我没有在变量中捕获对图表对象的引用。在图表渲染后的某个时间点,是否可以从图表对象已渲染到的元素的 ID 中获取对图表对象的引用(container在本例中)?

javascript highcharts

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

如何在html中显示c ++代码?

当与<pre>标签一起使用时,它仍然不显示<iostream.h>,<conio.h>而其他关键字包含<>尖括号,如" cout<<".我只想知道如何在网页上显示我的编码.(没有编译,没有语法突出显示)

html c++

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