---
id: bad87fee1348bd9aedf08845
title: Use a span to Target Inline Elements
challengeType: 0
videoUrl: ''
localeTitle: 使用跨度来定位内联元素
---
## Description
您可以使用跨度来创建内联元素。还记得我们使用btn-block类使按钮填满整行吗? 说明“内联”元素和“块”元素之间的区别。通过使用内联span元素,您可以将多个元素放在同一行上,甚至可以不同地为同一行的不同部分设置样式。在span元素中的“Things cats love”元素中嵌入“love”这个词。然后给出span类text-danger以使文本变为红色。以下是你如何使用“猫讨厌的三件事”元素: <p>Top 3 things cats <span class="text-danger">hate:</span></p>
## Instructions
## Tests
```yml
tests:
- text: 你的span元素应该在你的p元素中。
testString: 'assert($("p span") && $("p span").length > 0, "Your span element should be inside your p element.");'
- text: 你的span元素应该只有文字love 。
testString: 'assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), "Your span element should have just the text love.");'
- text: 你的span元素应该有class text-danger 。
testString: 'assert($("span").hasClass("text-danger"), "Your span element should have class text-danger.");'
- text: 确保您的span元素具有结束标记。
testString: 'assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/span element has a closing tag.");'
```
## Challenge Seed