小编Tem*_*fif的帖子

我有3个p标签，

<p> hi </p>
<p>hello</P>
<p>bye</P>

我想p仅通过使用纯CSS（不使用任何javascript）将第二个标签着色为红色。在不使用任何内联样式和类的情况下，我该如何实现？

<p> hi </p>
<p>hello</P>
<p>bye</P>

我目前正在使用vue.js拖放Web应用程序。在此应用程序中，我们在输入HTML元素上具有一些特殊设计的边框。

设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）

我尝试过类似创建同级div的操作，使它比输入大一点，在输入后面设置z-index并设置颜色。但是问题在于，浅蓝色的右边界和左边界将始终占据高度的100％。我需要大约75％或80％的东西。

“重叠”边框也可以在元素的顶部，右侧或左侧

有谁知道解决此问题的最佳方法？

在以下情况下，

<h2 class='first'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='second'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='third'>h2</h2>

我只想在h2.first和h2.second之间选择p。我尝试了选择同级，但是它选择了所有元素。

我有一个处理旋转动画的 CSS 类：

  .rotation {
    transition-property: transform;
    transition-duration: 0.4s;
    transition-delay: 0s;
  }

以及处理线性动画的第二个类：

.linear {
  transition-property: left, bottom;
  transition-duration: 0.8s;
  transition-delay: 0s;
}

当然，问题是，虽然我打算将这些转换规则应用于不同的属性——transform在一种情况下和left, bottom另一种情况下——当两者都应用于一个元素时，它们实际上是相互覆盖的，这样无论哪一个最后应用的是赢得 值的人transition-property，并且覆盖的属性没有应用于它的转换。

有没有办法以这种方式应用单独的过渡类？

这是我需要使用的HTML:

<div class="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  ...
</div>

我试过:nth-child() even/odd/xn+x等等 - 没有运气,我无法弄清楚要做什么计算.如果需要,可以通过PHP添加动态CSS类.

我正在尝试实现这种布局:

如何在 div 背景中指定渐变以实现以下视觉效果？

我能够用 4 个 div 实现外观，但无法提出只有一个 div及其使用渐变的背景属性的解决方案。

我认为即使使用 before 伪元素也是不可能的。

以下是我尝试过的想法，这清楚地表明可以使用 4 个具有线性渐变的 div：

下面是上面例子的代码：

#box1 {
  background-image: linear-gradient(225deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 228px;
  top: 335px;
  position: absolute;
  transform:rotate(-45deg);
}

#box2 {
  background-image: linear-gradient(-45deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 308px;
  top: 415px;
  position: absolute;
  transform:rotate(-45deg);
}

#box3 …

让我们考虑一下这段代码：

.canvas {
  width:150px;
  height:150px;
}
canvas {
  box-sizing:border-box;
  border:5px solid;
}

<canvas height="150" width="150"></canvas>
<canvas class="canvas"></canvas>

我们canvas定义了两个具有相同宽度/高度、相同边框和box-sizing:border-box. 我们可以清楚地看到，我们使用 CSS 属性的画布尊重box-sizing（边框从宽度/高度减少），但使用属性定义的第一个是忽略box-sizing（边框添加到宽度/高度）。

我首先认为它与属性的使用有关，但在使用imgor时似乎不像预期的那样工作iframe。

.canvas {
  width:150px;
  height:150px;
}
iframe,img {
  box-sizing:border-box;
  border:5px solid;
}

<iframe height="150" width="150"></iframe>
<iframe class="canvas"></iframe>

<img height="150" width="150" src="https://picsum.photos/200/300?image=1069">
<img class="canvas" src="https://picsum.photos/200/300?image=1069">

为什么canvas元素有这种行为？

经过一番搜索，我发现应该避免对画布使用宽度/高度属性，因为它会缩放画布并且不会像我们想象的那样调整它的大小。

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);

canvas {
  width: 150px;
  height: 150px;
  border:1px solid …

我想将CSS样式应用于＆＃8226（项目符号）字符，但尚未找到方法。这是我尝试过的：

• {
    word-spacing: 1em;
}

可以这样做吗？谢谢

我有这张图。

这在 CSS 中可能吗？

现在我知道你可以使用text-align: center，我什至可以让每条线成为一个跨度并逐渐增加填充，但是有没有我不知道的属性，比如中心距中心，或类似的东西？

这感觉很明显，但我想不出一个合理的方法。

更新

问题是因为在图片中，文本趋向于向底部变短，就像字母 V 一样，所以 t 开始变宽并逐渐变窄。

我从未见过类似的事情，所以很好奇。

我正在使用条带检查的自定义代码并尊重所有内容,但我收到此错误:

StripeCheckout.configure: 'data-key' is a required option, but was not found

这不是我第一次使用代码,我之前使用它,一切都很好.

这是完整的代码:

var handler = StripeCheckout.configure({
  key: 'pk_test_aaaaaaaaaaaaaaaaaaaa',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.querySelector('.stripe-button').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Title',
    description: 'description',
    currency: 'eur',
    amount: 9700
  });
  e.preventDefault();
});


// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
}); …