Question

这是我过去几周一直在努力的事情。

假设我有以下html（简化示例代码）

<img class="myimageclass" /> This is some text <br />

然后我的问题是：我如何使img en br标签之间的文字斜体？ img标签之前和br之后的文本不应该给出斜体样式。这段代码在文档中多次找到。

现在这可能看起来像一个非常简单的问题，但问题是：我无法对实际的html进行更改。因此，样式需要使用纯CSS或jQuery来完成。

有人知道这是否可行？如果是这样，怎么样？

我个人在考虑使用：after和：before伪元素来插入标签。但我不知道这是否可能，或者它是否是最佳方式。

TNX！

Answer 1

经过大量研究和检查所有建议后，我认为唯一有效的结论是根本不可能这样做。在这种情况下，jQuery是唯一的选择。

感谢大家的建议！

Answer 2

<img class="myimageclass" /><span><i> This is some text</i></span> <br />

否则下面的链接可能有助于您在条款

之前和之后学习

http://cssdeck.com/labs/styling-select-box-with-css3

Answer 3

此处的问题是您无法定位/设置不在标记内的纯文本。

因此，我认为您在此处可以做的最好的事情是在正文上设置font-style: italic;，然后假设其余文本位于<div>或<p>等标记内 - 覆盖该样式到font-style: normal;

<强> FIDDLE

body
{
    font-style: italic;
}
p, div, span, input /* etc */
{
    font-style: normal;
}

如果您有父元素，那么您可以定位

<强> FIDDLE

Answer 4

Please use this code it will work fine through the entire html following logic!
<!DOCTYpE html>
<html lang = "en"> 
<head>
    <title>Combinator</title>
 <style> 
   .myimageclass ~ p::first-line{
     color:hsla(0,100%,50%,1);
     font-style:italic;

 }
 </style>
</head>

<body>
<img class="myimageclass" /> <p>This is some text </p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
</body>
</html>

enter image description here

Answer 5

尝试以下代码：

CSS代码：

img.myimageclass span{
font-style:italic;
}

jQuery代码：

$('.myimageclass>img').each(
   function(){
        $(this.firstChild).wrap('<span></span>');
    });

HTML代码中没有任何更改。

CSS：如何在img和br标签之间制作文本斜体

5 个答案: