Question

我有一些页面，我的雇主要求标签页的其中一个标题以斜体显示部分标题，例如从NewsNow到新闻现在（没有空格）。问题是页面是动态生成的，我需要添加CSS规则。是否有一个伪类/元素我可以添加到CSS来执行此操作？以下是用于创建选项卡式页面的模板：

{% block extracss %}
<link rel="stylesheet" href="{% static 'css/jquery/jquery.ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery/jquery.ui.core.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery/jquery.ui.tabs.css' %}">
{% endblock extracss %}

{% block page_content %}
<div id="tabs">
   <ul>
     {% for tab_found in tabs_on_page %}
       <li>
          <a href="#tabs-{{ tab_found.order }}">{{ tab_found.title }}</a>
       </li>
     {% endfor %}
   </ul>
     {% for tab_found in tabs_on_page %}
<div id="tabs-{{ tab_found.order }}">
     {{ tab_found.html_blob|safe }}
</div>
     {% endfor %}
</div>
     {% endblock %}
     {% block extrajs %}
<script src="/static/core/js/jquery/jquery-ui-1.10.0.custom.min.js">
</script>
<script>
     jQuery(document).ready(function(){jQuery("#tabs").tabs();});
</script>
{% endblock extrajs %}

Answer 1

我担心没有纯粹的CSS方法来实现这一点。

如果您有权访问生成过程，则可以在每个部分周围添加<span>标记，然后使用span:nth-child(2)或span:nth-of-type(2)使第二部分斜体 < / p>

http://jsfiddle.net/pa67G/1/

否则你可能不得不依赖于Alien先生在评论中提到的JS解决方案

**更新**

假设每个标题由两部分组成，每部分以大写字母开头，这应该作为jQuery解决方案：http://jsfiddle.net/pa67G/3/

它使用RegExp ([A-Z])([a-z]*)([A-Z])([a-z]*)解析每个标题，并将其替换为<span>个标记。

需要用css定位一定数量的字符

1 个答案: