HTML - reversed 属性



HTML reversed 属性反转列表项,以便标记或数字以相反的顺序显示。

例如,具有 reversed 属性的有序列表中的第一个列表项将具有最大的数字,而后续列表项的值将递减。当您想要显示倒计时或通过递减值对项目进行排序时,此属性非常有用。这是一个有用的功能,可用于为特定用例制作具有反向编号的列表。

语法  


<ol reversed />

适用对象

下面列出的元素允许使用 HTML reversed 属性。

元素 描述
<ol> HTML <ol> 标签用于创建有序列表。有序列表的默认顺序是数字。

HTML reversed 属性的示例

以下示例将说明 HTML reversed 属性,我们应该在何处以及如何使用此属性!

reversed 属性数字列表元素

当我们运行下面的代码时,列表元素按降序编号。


<!DOCTYPE html>
<html>

<head>
	 <title>HTML reversed Attribute</title>
</head>

<body>
	 <h2>The ol reversed attribute</h2>
	 <ol reversed>
			<li>Apple</li>
			<li>Banana</li>
			<li>Mango</li>
	 </ol>
	 <p>
			<strong>Note:</strong> 
			The reversed attribute of the ol tag 
			is not supported in Edge prior version 79.
	 </p>
</body>

</html>

反向大写罗马数字列表元素

当我们运行下面的代码时,列表元素按降序获得罗马编号。


<!DOCTYPE html>
<html>

<head>
	 <title> HTML reversed Attribute</title>
</head>

<body>
	 <h2>The ol reversed attribute</h2>
	 <ol reversed type="I" start="10">
			<li>Apple</li>
			<li>Banana</li>
			<li>Mango</li>
	 </ol>
	 <p>
			<strong>Note:</strong> 
			The reversed attribute of the ol tag 
			is not supported in Edge prior version 79.
	 </p>
</body>

</html>

反向大写字母列表元素

当我们运行下面的代码时,列表元素按降序按字母顺序获得大写字母编号。


<!DOCTYPE html>
<html>

<head>
	 <title> HTML reversed Attribute</title>
</head>

<body>
	 <h2>The ol reversed attribute</h2>
	 <ol reversed type="A" start="3">
			<li>Apple</li>
			<li>Banana</li>
			<li>Mango</li>
	 </ol>
	 <p>
			<strong>Note:</strong> 
			The reversed attribute of the ol tag 
			is not supported in Edge prior version 79.
	 </p>
</body>

</html>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
是否支持 18.0 79.0 18.0 6.0 12.1