丰歌 » CSS http://fengyouyi.com 荒芜之地，没有收获的喜悦。 Wed, 08 Feb 2012 09:09:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery：几行代码实现简单选项卡TABS效果 http://fengyouyi.com/173 http://fengyouyi.com/173#comments Sat, 04 Feb 2012 02:30:38 +0000 Ulysses http://fengyouyi.com/?p=173 做个记录。

<!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=utf-8" />
<title>尝试用 jQuery 实现选项卡功能</title>
<style type="text/css">
page {
	font-size: 12px;
	padding: 40px;
}
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
h2 {
	font-size: 12px;
	padding: 0;
	margin: 0;
}

.tabs {
	width: 403px;
	height: 108px;
	border: 1px solid #CCC;
}
.tabs li {
	line-height: 26px;
	height: 28px;
	float: left;
	position: relative;
}
.tabs h2 {
	text-align: center;
	background: #EEE;
	width: 100px;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	cursor: pointer;
}
.tabs h2.active {
	background: #FFF;
	border-bottom: 1px solid #FFF;
}
.tabs .tab_0 h2 {
	border-left: none;
}
.tabs .tab_0 div {
	display: block;
}
.tabs div {
	background: #FFF;
	display: none;
	width: 363px;
	height: 40px;
	border-top: none;
	padding: 20px;
	position: absolute;
	top: 28px;
	left: 0;
}

.tab_0 div {
	left: 0;
}
.tab_1 div {
	left: -100px;
}
.tab_2 div {
	left: -201px;
}
.tab_3 div {
	left: -302px;
}
</style>
<script type="text/javascript" language="javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
	$(".tabs li").hover(function() {
		$(this).siblings().children("h2").removeClass("active");
		$(this).siblings().children("div").hide();
		$(this).children("h2").addClass("active");
		$(this).children("div").show();
	}, function() {
		//
	});
});
</script>
</head>

<body>
<div class="tabs">
	<ul>
    	<li class="first tab_0">
        	<h2 class="active">选项卡一</h2>
            <div>
            	选项卡一的内容
            </div>
        </li>
    	<li class="tab_1">
        	<h2>选项卡二</h2>
            <div>
            	选项卡二的内容
            </div>
        </li>
    	<li class="tab_2">
        	<h2>选项卡三</h2>
            <div>
            	选项卡三的内容
            </div>
        </li>
    	<li class="tab_3">
        	<h2>选项卡四</h2>
            <div>
            	选项卡四的内容
            </div>
        </li>
    </ul>
</div>
</body>
</html>
]]> http://fengyouyi.com/173/feed 0 CSS 选择器之属性选择器 http://fengyouyi.com/133 http://fengyouyi.com/133#comments Thu, 26 May 2011 03:18:47 +0000 Ulysses http://fengyouyi.com/?p=133 CSS：Attribute selectors

[att]
具有 att 属性的元素，不考虑属性值。例如

img[alt] {}
<img src="..." alt="..." />
<img src="..." />

匹配第一个 IMG 元素，但是不匹配第二个 IMG 元素。

[att=val]
具有 att 属性，且属性值恰为 val 的元素。例如

a[rel="external"] {}
<a href="" rel="external">...</a>
<a href="...">...</a>
<a href="..." rel="internal">...</a>

匹配第一个 A 元素，但是不匹配第二个和第三个 A 元素。

[att~=val]
具有 att 属性，该属性值由空格分隔的多个词组成（也可以仅有一个词），其中恰好有一个词为 val 的元素。例如 

div[class~="item"] {}
<div class="item">...</div>
<div class="current-item item">...</div>
<div class="page">...</div>
<div class="current-item page">...</div>

匹配第一个和第二个 DIV 元素，但是不匹配第三个和第四个 DIV 元素。

[att|=val]
具有 att 属性，且属性值恰好为 val 或是以 val 开头并紧跟连字符 - 的元素。例如 

a[hreflang|="zh"] {}
<a href="..." hreflang="zh">...</a>
<a href="..." hreflang="zh-CN">...</a>
<a href="..." hreflang="en zh">...</a>
<a href="..." hreflang="en zh-CN">...</a>

匹配第一个和第二个 A 元素，但是不匹配第三个和第四个 A 元素。

[att^=val]
具有 att 属性，且属性值以 val 开头的元素。例如

a[href^="http://fengyouyi.com"] {}
<a href="http://fengyouyi.com">Home</a>
<a href="http://fengyouyi.com/about">About</a>
<a href="/about">About</a>
<a href="http://www.chinahtml.com/">ChinaHTML</a>

匹配第一个和第二个 A 元素，但是不匹配第三个和第四个 A 元素。

[att$=val]
具有 att 属性，且属性值以 val 结尾的元素。例如

a[href$=".html"] {}
<a href="/about.html">About</a>
<a href="/about.htm">About</a>

匹配第一个 A 元素，但是不匹配第二个 A 元素。

[att*=val]
具有 att 属性，且属性值中包含有 val 子字符串的元素。例如

div[class*="item"] {}
<div class="item">...</div>
<div class="currentitem">...</div>
<div class="page">...</div>

匹配第一个和第二个 DIV 元素，但是不匹配第三个 DIV 元素。

]]> http://fengyouyi.com/133/feed 0 如何计算 CSS 选择器的权重？ http://fengyouyi.com/74 http://fengyouyi.com/74#comments Wed, 21 Oct 2009 06:22:17 +0000 Ulysses http://fengyouyi.com/?p=74 之前在编写 CSS 的时候，多次遇到类选择器“无效”（优先级不够）的情况，例如下面的 HTML 代码：

<div class="entry">
    <p>段落内容。
        <a class="links" href="http://fengyouyi.com">链接</a>
    </p>
</div>

对应 CSS 代码如下：

.entry a {
    color: red;
}
.links {
    color: blue;
}

一直以来都简单地按照先后顺序来理解，以为这里链接会呈现蓝色，事实不然。我所理解的先后顺序，只是样式表的层叠顺序。在具体执行时，还需要考虑到样式的权重（原文作 specificity，我个人理解为权重）。

参考官方 CSS2.1 文档中的《6.4.3 Calculating a selector’s specificity》部分，我们可以了解到权重计算遵循以下规则：

  • 如果是通过 ‘style’ 属性声明而不是通过选择器来声明的规则，算作 1，否则为 0 （a 位）（在 HTML 中，一个元素的“style”属性的值是一组样式规则。这些规则没有选择器，所以 a=1、b=0、c=0、d=0）；
  • 计算选择器中的 ID 属性个数（b 位）；
  • 计算选择器中的其它属性（选择器）和伪类个数（c 位）；
  • 计算选择器中的元素名和伪元素个数（d 位）。

这个计算方法仅基于选择器的形式。需要特别说明的是，“[id=p33]”形式的选择器是算作属性选择器的（a=0, b=0, c=1, d=0），即使在源文档的 DTD 中 id 属性被定义为“ID”。

将四个数字串联成 a-b-c-d ，就可以获得选择器的权重了。

我们要如何理解这个呢？其实很简单。所有的选择器的权重都用 a-b-c-d 的形式表示，我们只要按照从 a 到 d 四个位置的数字，对应比较就可以得到权重顺序了。例如 1-0-0-0 的权重高于 0-2-1-2 ，因为在 a 位置，前者为 1 ，后者为 0 ，这样后面的就无须比较了。

更新

2009-10-21 23:38

看到 junp 在这里的评论，我才醒悟过来，他给我参考的那篇文章中那句“HTML标记的权重是 1，CLASS的权重是 10，ID的权重是 100，继承的权重为 0 ”，使我误以为作者将这几组值当作十进制来处理了。这里，如果按照 a-b-c-d 的形式，我们需要将其理解为“HTML标记的权重是 0-0-0-1，CLASS的权重是 0-0-1-0，ID的权重是 0-1-0-0，继承的权重为 0-0-0-0 ”。所以最底部的那部分更新内容，就当作加深了解的范例吧。

对原作者飘零雾雨表示歉意，同时也对 junp 表示由衷的感谢。

2009-10-21 14:22

站长资讯论坛上的 junp 给了我一篇网络上的文章，也是介绍这个的。但是看了作者计算权重的方法，好像是不正确的。因为按照他的方式，得到的最终权重值是 a*1000 + b*100 + c*10 + d 。这个是不正确的。我们可以构想一下，如果两个选择器，A 在 d 位上有 11 个元素名，例如 div div div div div div div div div div div ，而 B 在 c 位上只有 1 个属性选择器，例如 p[id="p33"] ，按照他的计算方式，A 的权重为 11 ，B 的权重为 10 。参考下面 HTML 和 CS 代码：

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <p id="p33">看看文本显示的颜色</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
div div div div div div div div div div div {
    color: red;
}
p[id="p33"] {
    color: blue;
}

结果是蓝色。

所以权重的计算，是按“位”比较，而不是十进制的。不过作者也提到了“按照从左到右的顺序逐位比较”，或许只是表述不清吧。

]]> http://fengyouyi.com/74/feed 6 IE6、IE7 和 IE8 中的 CSS 兼容性速查表 http://fengyouyi.com/51 http://fengyouyi.com/51#comments Mon, 19 Oct 2009 01:52:51 +0000 Ulysses http://fengyouyi.com/?p=51 来源：Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8（BlogSpot 被和谐，访问需要翻墙）

这份兼容性速查表对比了 Internet Explorer 6、7 和 8 中的 CSS2.1、CSS3 兼容情况。

GIF：第一页 第二页
PDF：第一页 第二页

本站：第一页 第二页

你可以用 A3 纸来打印上面的内容。

先前腾讯的 ISD Webteam 也发布了一份 CSS3 参考手册（中文版）（本地备份），CHM 格式，大家也可以下载了备用。

]]> http://fengyouyi.com/51/feed 0