HTML5和css3超实用的新属性集合

1.用CSS美化被鼠标选中的文字的样式
Windows自身提供的是一种很难看的墨绿色的颜色，而苹果电脑上提供的是浅绿色。火狐浏览器，IE9，Opera和谷歌浏览器允许我们自定义被选择文字的颜色。

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

2.HTML5里的placeholder属性
placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

<input type="text" name="first_name" placeholder="你的姓名..." />

3.HTML5里download属性
当用户点击这个链接，download属性值里的新名称就会显示到弹出的下载框里。这样你保存的文件名称是“预算表.pdf”。

<!-- 下载时使用"预算表.pdf"名称 -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载支出费用表</a>

4.HTML5里autofocus属性
这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

5.HTML5的hidden属性
当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间

<div hidden>
    You can't see me!
</div>

如果你使用的是老式浏览器，不支持这个属性，你可以在CSS里添加下面的代码来支持它

*[hidden] { display: none; }

6.CSS里的:target伪选择器

当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

/* would apply to all targetted elements */
:target {
    color: #000;
}

/* applies to H2's */
h2:target {
    color: #f00;
}

7.在CSS里用calc进行计算

这个calc计算器在计算相对宽度时非常的有用。它能执行加、减、乘、除。看看下面的代码写法：

/* basic calc */
.simpleBlock {
    width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
    width: calc(100% - 50% / 3);
    padding: 5px calc(3% - 2px);
    margin-left: calc(10% + 10px);
}

8.使用HTML5中的element.dataset操作自定义data-*数据

<div id="myDiv" data-name="myDiv" data-id="myId"
       data-my-custom-key="This is the value"></div>

要想获取这个data-id属性，你的代码应该写成这样

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

jquery 写法

$("#myDiv").data("id")