CSS学习笔记----选择器

用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗?

css,用过的都说好!

最基本的选择器,id选择器,类选择器这些大家早已心知肚明的就不在这里赘述了,有那功夫赶紧研究一下把妹攻略大笑.

伪类:

:link,:visited被称为链接伪类,只能被用在<a>标签上。:hover,:active,:focus称为动态伪类,可以用于任何元素。

属性选择器:

支持自定义属性
input[title=te]{color:red} /*属性选择器*/
input[other=wch]{color:blue}

层叠和特殊性

顺序:!important的用户样式 > !important的作者样式 > 作者样式 > 用户样式 > 继承 > 浏览器样式

css特殊性计算规则:
css特殊性分成4个等级;a,b,c,d
a表示 style样式;
b表示id选择器的数量;
c表示类、伪类和属性选择器的数量;
d表示类型选择器和伪元素选择器的数量。
由此计算出来的四位数abcd,值越大,优先级越高;
例如:
style=""   值为1000
#wrapper #content {} 值为0200
div#content{} 值为0101
#conten{} 值为0100
p.comment .dateposted{}  值0021
div p{} 值为0002

如果两个规则的特殊性相同,那么定义的规则优先。

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style >
a:hover,input:hover{border-color:red;} /*伪类选择器*/
a:focus,input:focus{border-color:blue}
a:active,input:active{border-color:green}
a:link{border-color:#FFFF00}
a:visited{border-color:#FF33CC}
a + p{color:green} /*选择兄弟元素,无效好像*/
#nav>li{color:red !important;} /*改变特殊级别*/
#nav li{color:yellow}
#nav li *{color:green} /*通用选择器*/
input[title=te]{color:red} /*属性选择器*/
input[other=wch]{color:blue}
div#ttt{color:#CC0066}
</style>
</head>

<body>
<a href="#" >wch</a>
<input type="text" value="12321" title="test" other="wch" />
<input type="text" value="12321" title="te" other="qqq" />
<input type="text" id="ttt" value="wch"  />
<div id="ttt">test element#id</div>
<ul id="nav">
	<li>h1</li>
	<li>
		<ul>123312
			<li>x1</li>
			<li>x2</li>
		</ul>
	</li>
	<li>h3</li>
</ul>
</body>
</html>



原文地址:https://www.cnblogs.com/vvch/p/4027583.html