级联样式单与css选择器、浏览器专属属性

100 阅读2分钟
lnclude-source:该属性的值应为url(url),插入绝对或相对url地址所对应的文档(目前浏览器不支持)
content:该属性的值可以是字符串、url(url)、courter(name)、content(name,list-stile-type)、open-quote、close-quote等格式

实例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p::after{
				content: "*";/*content(name)*/
			}
		</style>
	</head>
	<body>
		<div class="contents">
			<p>1p</p>
		sss	<p>2p</p>
			<p>3p</p>
		</div>
	</body>
</html>
quotes:该属性用于为content属性定义open-quote和close-quote,该属性值可以是两个以空格分隔的字符串,第一个为open-quote后面为close-quote

实例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 400px;
				height: 50px;
				line-height: 50px;
				quotes: "《" "》";
			}
			p::after{
				content: close-quote;
			}
			p::before{
				content: open-quote;
				
			}
		</style>
	</head>
	<body>
		<div class="contents">
			<p>1p</p>
			<p>2p</p>
			<p>3p</p>
		</div>
	</body>
</html>

counter-increment:该属性用于定义一个计数器,该属性的值为所定义的计数器的名称

自定义编号:
    lower-romman:小写罗马数字 upper-roman:大写罗马数字
    lower-alpha:小写英文字母  upper-alpha:大写英文字母
    none:不用项目符号
    cjk-ideographic:浅白色表意术字 georgian:传统的乔治数字
    lower-geek:基本的希腊小写数字  hebrew:传统的希伯莱数字
    hiragana:日本平假名字符    hiragang-iroha:日本平假名序号
    katakana:日本片假名字符   katakana-iroha:日本片假名序号
    lower-latin:小写拉丁字母   upper-latin:大写拉丁字母
实例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 400px;
				height: 50px;
				line-height: 50px;
				padding-left: 50px;
				counter-increment: mycounter; /* 自定义的计数器名称 */
			}
			p::before{
				content: counter(mycounter,upper-alpha)"."; /* 大写英文字母 */
			}
		</style>
	</head>
	<body>
		<div class="contents">
			<p>1p</p>
			<p>2p</p>
			<p>3p</p>
		</div>
	</body>
</html> 

counter-reset:该属性用于对指定的计数值复位

浏览器专属属性
    -ms-:internetExplorer浏览器专属的css属性需添加-ms-
    -moz-:基于gecko引擎的浏览器(例如火狐)
    -o-:opera浏览器(欧朋浏览器)
    -webkit-:所有基于webkit引擎的浏览器,如chrome、safari
    
新增伪类选择器
    selector:target:匹配符合selector选择器且必须是有锚点目标的元素
        匹配相关url指向的元素
        实例:
        div:target指向的是下面的代码,单击a的时候选中的对应的id等于#name对应的模块
        <a href="#one" ></a><a href="two"></a>
        <div id="one"></div><div id="two"></div>
    selector1:not(selector2):匹配符合selector选择器,但不符合selector2选择器的元素,相当于selector1减去sele12