CSS3出来很久了,但是因为本人前端小白,对大部分CSS3的特性并不是很熟悉,所以在实际开发中使用的也不是很多,但CSS3的很多特性会使开发变得共容易(要不然出CSS3干什么呢(摊手))
国际惯例介绍篇文章:https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
文章是对CSS3新特性的总结,并且配有一些小例子,很不错。
接下来我将详细介绍一些CSS3常用和实用的特性。
选择器可以让我们很容易找到元素,而增加的选择器可以说更精确的找到某个。
虽然我们想精确到某个元素可以给他加class,但class太多很麻烦,尤其是起名,是个让人苦恼的过程,如果有重复的就很麻烦了。
CSS3选择器
1、p~ul: 选择前面有p元素的ul
看一下例子:
<style>
p~ul{
background:red;
}
</style>
<body>
<div>
<p></p>
<ul id="ul1">111</ul>
</div>
<p></p>
<div>
<ul id="ul2">222</ul>
</div>
<div>
<p></p>
<span></span>
<ul id="ul3">333</ul>
</div>
</body>
从上面不难看出 p和ul为同级元素,且在ul前面(不需要紧挨着)。
2、
[attribute^=value] eg:a[src^='https']
选择src属性以https 开头的a元素
[attribute$=value] eg:a[src$='.php']
以.php结束的a元素
[attribute*=avlue] eg:a[src*='abc']
src中包含abc的a元素
在看一下CSS2的
[attribute] eg:input[placeholder]
拥有placeholder的input
[attribute=value] eg:input[name='abc']
name属性为abc的input
[attribute~=value] eg:[title~='abc']
title属性包含‘abc’得元素
[attribute|=value] eg:[title|='abc']
title属性以‘abc’开头的
可以说差不多吧 都可以使用。
3、
p:first-of-type
p:last-of-type
p:only-of-type
p:nth-of-type(n)
p:nth-last-of-type(n)
以上为一类:表示 属于其父元素的第一个、最后一个、唯一的一个、第N个的P的样式。
最后一个只是顺序是从下面开始计算的。
颜色为红色的所有P都是其父元素的第一个P元素,而非第一个子元素。
最后一个 p 000 即便他前面有两个div并且两个div里面有很多p元素,它依然符合要求,因为他是父元素body的第一个p元素。
其他类比就可以了, 只不过only-of-type表示父元素只有一个p元素才符合,若有2个以上 就没有符合条件的了。
4、
p:first-child(属于CSS2)
p:last-child
p:nth-child(n)
p:nth-last-child
p:only-child
属于父元素的第一、最后、第n个子元素的每个P
看图理解一下:p:nth-child(2) 就是其父元素的第二个子元素,且子元素为p的。可以看到p c111是其父元素body的第三个子元素所以未被选中,而div b22虽然是其父元素div的第二个子元素 但是他是div 所以也不可。
5、
p:empty 选择没有子元素的每个p
6、
input:enabled 每个启用的input
input:disabled 每个禁用的input
input:checked 每个被选中的input
7、:not(selector)
非很好理解,不过注意的是他后面跟的是selector 意思是可以写选择器
这里可以看到 不仅可以简单的写元素名,还可以用一些复杂的选择器,都是可以的,如上面#div1 :not(div[data="abc"])