韩顺平_php从入门到精通_视频教程_第12讲_通配符选择器_父子选择器_学习笔记_源代码图解_PPT文档整理

本文链接：https://blog.csdn.net/wenximalong/article/details/8178815

文西马龙：http://blog.csdn.net/wenximalong/

小案例，要求如下：

（1）默认样式是黑色，24px，没有下划线
（2）当鼠标移动到超链接时，自动出现下划线
（3）点击后，超链接变成红色

test.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="test.css" />
	</head>
	<body>
		<!--控制超链接样式-->
		<!--默认是蓝色下划线-->
		<!--
		<a href="http://www.baidu.com">连接到百度</a>
		-->
		<a href="http://www.baidu.com">连接到百度</a>
		<!--都是p段落，但是希望有不同的样式-->
		<p class="cls1">p1fjajfjds</p>
		<p class="cls2">p2fjajfjds</p>
	</body>
</html>

test.css

a:link{
	color: black;
	text-decoration: none;
	font-size: 24px;
}

a:hover{
	text-decoration: underline;
	font-size: 40px;
	color: green;
}

a:visited{
	color: red;
}

/*对同一种html元素分类*/
p.cls1{
	color: blue;
	font-size: 30px;
}

p.cls2{
	color: red;
	font-size: 20px;
}

开发经验：做股票/期货网站，一定要在服务器上做设置，不让对方缓存数据：股票信息没有变，有些人没有习惯刷新，就会看到信息老是不变，这是细节。

通配符选择器
该选择器可以用到所有的html元素，但是其优先级最低。
如果希望所有的元素都符合某一种样式，可以使用通配符选择器
*{margin:0;padding:0}
可以让所有html元素的外边距和内边距都默认为0，有时特别有用。

margin: 10px 30px 40px 1px;
margin可以
如果
是一个值，（上右下左（按顺时针方向旋转））
是两个值（上下，左右）
是三个值（上，左右，下）

demo1.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="demo1.css" />
	</head>
	<body>
		<p>这金风科技撒开发</p>
		<a href="http://www.baidu.com">连接到百度</a>
		<h1>这是标题吗</h1>
	</body>
</html>

demo1.css

/*通配符选择器*/
*{
	margin-top: 40px;
	margin-left: 0px;
	margin: 10px 30px 40px 1px;
}

有经验的美工，上来就先
margin:0px;
padding:0px;
这是一个很重要的技巧，屏蔽不同浏览器的默认内间距和外间距，全部清零，然后再指定。清除默认边距，自己再调整，把主动权掌握在自己手中。

四个选择器优先级
ID选择器>class选择器>html选择器>通配符选择器

选择器的深入探讨
前面讲的都非常简单，实际上css的选择器使用还有很多需要注意的地方，如果不注意根本就不能驾驭css

①父子选择器

=====

demo2.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="demo2.css" />
	</head>
	<body>
		<span id="id1">这是一则<span>非常<span>重</span>要</span>的新闻</span>
	</body>
</html>

demo2.css

#id1{
	background-color: silver;
	font-size: 40px;
}
/*父子选择器*/
/*#id1和span之间有空格，对id1下的span再做一个约束*/
#id1 span{
	color: red;
	font-style: italic;
}
/*父子子*/
#id1 span span{
	color: green;
}

通过上面总结：
1.父子选择器可以有多级（但实际开发中不建议太多，不要超过3曾）

2.父子选择器有严格的层级关系

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录