css 选择器

最新推荐文章于 2023-12-12 09:35:39 发布

iteye_21211

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量140

点赞数

分类专栏： Web 文章标签： css选择器

本文链接：https://blog.csdn.net/iteye_21211/article/details/82205771

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/* (1)类型选择器 */
p,h1 {
	color: red;
	font-weight: bold;
}

/* (2)后代选择器 */
ol li {
	color: blue;
}

/* (3)ID选择器 */
#myInput {
	color: red;
}

/* (4)class选择器 */
.myButton {
	color: blue;
}

/* (5)伪类选择器 */
a:LINK {
	color: red;
}
a:VISITED {
	color: olive;
}
a:ACTIVE {
	color: blue;
}

/* (6)通用选择器*/

/* ---------
* {
	padding: 0;
	margin: 0;
}
--------- */

/* (7)子选择器 */
#nav>li {
	padding-left: 20px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello U</title>
</head>
<body>
	<h1>This is tag h1.</h1>
	<p>This is tag p.</p>
	<ol>
		<li>This is tag li 1 in ol.</li>
		<li>This is tag li 2 in ol.</li>
	</ol>
	<ul>
		<li>This is tag li 3 in ul.</li>
		<li>This is tag li 4 in ul.</li>
	</ul>
	
	<input id="myInput" type="text" value="input1"/>
	<input class="myButton" type="button" value="button1" />
	
	<p/>
	<a href="http://www.baidu.com">baidu</a>
	
	<p/>
	<ul id="nav">
		<li>Home</li>
		<li>Service</li>
		<ul>
			<li>Home</li>
			<li>Service</li>
		</ul>
		<li>Contact Us</li>
	</ul>
	
</body>
</html>

css层叠:

(1)用style属性编写的规则高于其他任何规则。

(2)Id选择器高于没有ID选择器的规则。

(3)类选择器的规则比只有类型选择器的规则特殊。

(4)如归两个规则的特殊性相同，那么后面定义的规则优先。

css引入页面:

<!--

@import url("/css/basic.css");

-->

</style>

css引入速度

css注释、空格的删除以及压缩