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>

巴特西

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

伪类：

属性选择器：

层叠和特殊性

演示代码：

最新文章

热门文章