Question

我有一个css类，它改变了字体颜色。我没有通过CSS找到解决方案，这个类如何只能改变字母的字体颜色。

CSS

.blue{color:blue;}

HTML

<span class="blue">stackoverflow</span>

我需要更好的解决方案()

<span class="blue">stack</span>(<span class="blue">x</span>)<span class="blue">overflow</span>

这也适用于：

<span class="blue">stack(x)overflow</span>

括号应为黑色。如果仅使用CSS是不可能的，那么如何使用JavaScript或PHP？

Answer 1

如果您接受javascript（和jQuery），那么这将达到您想要的效果。

简而言之，它会检索文本，将其切换为＆＃34;文本内容的交替部分＆＃34; /＆＃34;其他内容＆＃34;，然后将它们全部串在一起＆＃34; blue＆＃34;适用于＆＃34;文字内容＆＃34;部分。

＆＃13;

function GetParts(text) {
  var parts = [];
  var index = 0;
  parts[index] = '';
  var isText = true;
  for (var i = 0; i < text.length; i++) {
    var c = text.charAt(i);
    var isLetter = (c >= 'A' && c <= 'Z') || (c >= 'a' && c <= 'z');
    if (isLetter) {
      if (isText) {
        parts[index] += c;
      } else {
        isText = true;
        index++;
        parts[index] = c;
      }
    } else {
      if (!isText) {
        parts[index] += c;
      } else {
        isText = false;
        index++;
        parts[index] = c;
      }
    }
    console.log('index = ' + index + ', parts[index] = ' + parts[index]);
  }
  return parts;
}

function ChangeText() {
  // Find and then process all elements with css class '.OnlyLettersBlue'
  $('.OnlyLettersBlue').each(function() {
    var elem = $(this);
    var text = elem.text();
    var parts = GetParts(text);
    var result = '';
    for (var i = 0; i < parts.length; i++) {
      if (i % 2 == 0)
        result += "<span class='blue'>" + parts[i] + "</span>";
      else
        result += parts[i];
    }
    elem.html(result);
  });
}

＆＃13;

span {
  font-size: 20px;
}

.blue {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Text 1: <span class="OnlyLettersBlue">stack(x)overflow</span><br />
Text 2: <span class="OnlyLettersBlue">Some[--{thing}--]else</span><br />
<button onclick="ChangeText()">Colorize text</button>

＆＃13;

Answer 2

这是一个基于正则表达式的变体：

＆＃13;

$(function() {

  var regex = /([\w\s]+)/g;
  
  $('.blueLetters').each(function() {
    var elem = $(this);
    var text = elem.text();
	var result = text.replace(regex, '<span class="blue">$1</span>');
    elem.html(result);
  });
})

＆＃13;

span {
  font-size: 20px;
}

.blue {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>I'm not affected (really)</span><br>
<span class="blueLetters">stack(x)overflow</span><br>
<span class="blueLetters">Something (else)</span><br>
<span>Neither am I</span><br>

＆＃13;

基本上，上面的正则表达式使用了这些功能：

[abc]匹配括号之间的任何字符;
A +表示＆＃39; A＆＃39;重复一次或多次;
\ w匹配任何字母数字字符;
\ s匹配任何空格字符，包括制表符和换行符;
（某事）创建一个小组;
/ something / g表示表达式应全局应用，而不是仅应用一次。

推荐阅读：https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions

Answer 3

我不认为你可以单独使用CSS。

您可能需要查看Lettering.js

此外，虽然下面的黑客 NOT 完全是您问题的答案，但它确实有一些有限的用途。

只是为了好玩。

<div class="data_card" *ngIf="!Add.showEdit" (keyup.enter)="myfunction($event)">
<!-- Some content -- >
</div>


myfunction($event){
      $event.preventDefault();
      alert("sadsa");
}

.blue {
  color: blue
}

span:nth-child(1)::after {
  content: "("
}

span:nth-child(3)::before {
  content: ")"
}

span:nth-child(1)::after,
span:nth-child(3)::before {
  color: black
}

Answer 4

对迟到的回应道歉

https://jsfiddle.net/vsdLx0xv/

我刚刚把它包裹起来（在标签中。它没有保留（AFAIK），并且很快做出快速更改。

然后相应地设计

<UserControl.Resources>
    <Style x:Key="ComboboxStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding ShownName}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <ComboBox x:Name="Combobox" IsSynchronizedWithCurrentItem="True" 
              IsEditable="True" TextSearch.Text="ShownName"
              IsTextSearchEnabled="True" DisplayMemberPath="ShownName"
              ToolTip="{Binding SelectedItem.ShownName,ElementName=autoComplete}"
              ItemsSource="{Binding ItemsSource,ElementName=autoComplete}"
              SelectedItem="{Binding SelectedItem, ElementName=autoComplete}"
              Style="{StaticResource ComboboxStyle}">
        <ComboBox.InputBindings>
            <KeyBinding Key="Enter"
                        Command="{Binding Path=SelectItemCommand, ElementName=autoComplete}"
                        CommandParameter="ShownName"/>
        </ComboBox.InputBindings>
    </ComboBox>
</Grid>

如果没有js

包裹括号，就找不到方法

字体

4 个答案: