《css权威指南》学习之选择器

最新推荐文章于 2025-08-13 18:53:35 发布

hoyin_wong

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量981

点赞数

CC 4.0 BY-SA版权

分类专栏： css权威指南文章标签： css web前端 ie css权威指南学习选择器

本文链接：https://blog.youkuaiyun.com/why_fly/article/details/12978503

css权威指南专栏收录该内容

2 篇文章

订阅专栏

本文摘录自《CSS权威指南》，详细介绍了浏览器对CSS类名和ID名大小写的处理方式，不同版本IE浏览器对属性选择器的支持情况，以及:hover和:focus伪类的应用限制。此外，还澄清了:first-child选择器的常见误解，并说明了伪元素的正确用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在看《css权威指南》，向一边学习一边记下，以便以后查询。

2013/10/23

P44：

a：一些较老的浏览器不区分类名和ID名的大小写，不过现在当前的所有浏览器都要求区分大小写。

b： IE5?Mac和IE6/win之前的都不支持属性选择器，不过IE7及以后的都已经全面支持所有css2.1属性选择器，还支持一些css3属性选择器。

P62：

windows平台下的IE6及之前的只允许动态伪类选择超链接，而不允许选择其他元素。不过现在ie7以后的都支持所有元素都能应用：hover，但不支持对表单元素应用：focus样式。

P63:

对于first-child的误区

<div>
	<p>There are the necessary step:</p>
	<ul>
		<li>Insert Key</li>
		<li>ghjh <strong>gjhfdgehfjds</strong> jshfdjks</li>
		<li>push it out</li>
	</ul>
	<p>Do <em>hjdsjsbj</em>frtewgfhwhfw</p>
</div>

其对应得css样式为：

div{
		width: 300px;
		height: 300px;
	}
	p:first-child{
		background-color: yellow;
	}
	li:first-child{
		text-transform: uppercase;
		background-color: red;
	}

在这个文档树中，作为第一个子元素的事第一个p，第一个li和strong及em元素。

其效果显示为：

从效果中可以看出，css样式选择的是第一个p和第一个li，而不是我自己原先以为的d第二个p下的第一个元素em，和li元素下的strong，原来p：first-child的意思是p作为第一个元素来应用该样式。

ps：ie6之前的不支持first-child

P67:

所有的伪元素都必须=放在出现该伪元素的选择器的后面，因此，如果写成

p:first-line em 就是不合法的。因为伪元素出现在选择器主体前面（主体在这里是指em）