第二章添加样式（精通CSS）

最新推荐文章于 2023-08-11 21:33:04 发布

原创最新推荐文章于 2023-08-11 21:33:04 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

精通CSS 专栏收录该内容

2 篇文章

订阅专栏

2.1.3 属性选择符

用属性选择符给带有title属性的abbr元素添加不同的样式

abbr[title]{
	boder-bottom: 1px dotted #999
	}
abbr[title]: hover{
	cursor:help;
}

所有type属性为submit的imput的元素在鼠标指针悬停时，都会显式一个手光标

imput[type : "submit"]{
	cursor : pointer;
}

2.1.4 伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.chapter::before{
				content: '"';
				font-size: 15em;
			}
			.chapter p::first-letter{
				float: left;
				font-size: 3em;
				font-family: Georgia, 'Times New Roman', Times, serif;
			}
			.chapter p::first-line{
				font-family: Georgia, 'Times New Roman', Times, serif;
				text-transform: uppercase;
			}
		</style>
	</head>
	<body>
		<h1>A Study In Scarlet</h1>
		<section class="chapter"><p>he guinea pig festival in Peru is a one day event to celebrate these cute local animals.
		 The festival included a fashon show where animals are dressed up in various amusing costumes.</p></section>
	</body>
</html>

2.1.6 结构化伪类

nth-child选择符，可以用来交替的为表格表格应用样式：下面的例子会将表格的奇数行的背景变成黄色。

tr:nth-child(ood){
	backound-color
}

nth选择符可以接受很多不同的表达式来作为参数，可以接受odd（奇数）和even（偶数）作为参数，这个参数还可以是数值。

2.2 层叠

一般来说，作者定义的样式是最优先的，为了给用户更高的优先权，Css允许用户使用！important覆盖任何规则。

p{
	font-size:1em !important
	color:#666 !important

层叠的重要性级别重高到低如下：
标注为！important的用户样式
标注为!important的作者样式
作者样式
用户样式
浏览器的默认样式
2.3.1 利用层叠次序
如果两个规则的优先性相同，则优先使用后定义的规则。要是把a:visited放在hover后面，那么在访问完该链接以后，悬浮样式将不会再起作用。因为已经被visited给覆盖了。正确的次序应该是a:link, a:visited a:hover a:focus a:avtive.