日度归档:2020年6月28日

css quotes属性功能简介


摘要:
下文讲述css属性quotes的功能说明,如下所示:


css quotes的功能说明

为选中的对象添加嵌套标记
此属性适用于::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

  quotes 语法:
       quotes:none | [<string> <string>]+
 -----------参数说明--------------
none:  
none:
content属性的open-quote和close-quote值将不会生成任何标记
<string>:
定义content属性的open-quote和close-quote值的标记,2个为一组
 
quotes注意事项:
    js脚本中需使用quotes属性设置其属性


css quotes的功能示例说明

<meta charset="utf-8" /> 
<style>
q:lang(en){quotes:'[' ']' "<" ">";}
q:lang(zh-cn){quotes:"<<" ">>" '"' '"';}
</style>
<P>
 maomao365.com<br />
 quotes属性使用实例
</p>
<hr />
<p lang="en"><q>我会被嵌套 <q>我会被嵌套--2</q> 我会被嵌套</q></p>
<p lang="zh-cn"><q>我会被嵌套 <q>我会被嵌套-2</q> 我会被嵌套</q></p>
css之quotes属性示例说明

css之quotes属性示例说明

css counter-reset属性功能简介


摘要:
下文讲述css属性counter-reset的功能说明,如下所示:


css counter-reset的功能说明

设置一个列表元素的计数器复位

  counter-reset 语法:
        counter-reset:none | [<identifier> <integer>]+
 -----------参数说明--------------
none:  
禁止计数器复位
<identifier>:
identifier定义一个或多个将被复位的selector,id,或者class
<integer>:
定义被复位的数值,可以为负值,默认值是0

counter-reset注意事项:
    js脚本中需使用counterReset属性设置其属性


css counter-reset的功能示例说明

<meta charset="utf-8" /> 
<style>
.lsTest ol{margin:16px 0;padding:0;list-style:none;}
.lsTest li li:before{color:green;font-weight:bold;}
.counter1 li{counter-increment:a;}
.counter1 li:before{content:counter(a)".";counter-reset:a;}
.counter2 li{counter-increment:b;}
.counter2 li:before{content:counter(b)".";counter-reset:b 10;}
.counter3 li{counter-increment:c;}
.counter3 li:before{content:counter(c)".";counter-reset:c -1;}
</style>
<p>
 maomao365.com <br />
 counter-reset属性示例说明
</p>
<hr />

<ul class="lsTest">
	<li class="counter1">
		<strong>默认时被复位的计数器:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
	<li class="counter2">
		<strong>将计算器复位为10:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
	<li class="counter3">
		<strong>将计算器复位为-1:</strong>
		<ol>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
			<li>猫猫教程</li>
		</ol>
	</li>
</ul> 
css counter-reset属性示例说明

css counter-reset属性示例说明

css counter-increment属性功能简介


摘要:
下文讲述css属性counter-increment的功能说明,如下所示:


css counter-increment的功能说明

设置一个列表元素选择器的增加的步长

  counter-increment 语法:
        counter-increment:none | [<identifier> <integer>]+
 -----------参数说明--------------
  none:
   阻止计数器增加
 <identifier>:
     identifier定义一个或多个将被增加的selector,id,或者class
<integer>:
     定义计算器每次增加的数值,可以为负值,默认值是1

counter-increment注意事项:
    js脚本中需使用counterIncrement属性设置其属性


css counter-increment的功能示例说明

 
<meta charset="utf-8" /> 
<style>
.test ol{margin:16px 0;padding:0;list-style:none;}
.test li li:before{color:green;}
.counter1 li{counter-increment:a;}
.counter1 li:before{content:counter(a)".";}
.counter2 li{counter-increment:a2 2;}
.counter2 li:before{content:counter(a2)".";}
.counter3 li{counter-increment:a3 -1;}
.counter3 li:before{content:counter(a3)".";}
</style>
<p>
maomao365.com<br />
counter-increment属性值说明
</P>
<hr />
<ul class="test">
	<li class="counter1">
		<strong>默认时的计数器:</strong>
		<ol>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ol>
	</li>
	<li class="counter2">
		<strong>修改计数器每次增加的值为2:</strong>
		<ol>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ol>
	</li>
	<li class="counter3">
		<strong>修改计数器每次增加的值为-1:</strong>
		<ol>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ol>
	</li>
</ul> 
css  counter-increment属性示例说明

css
counter-increment属性示例说明