CSS3的新特性--选择器

来源：互联网发布：优化发展环境编辑：程序博客网时间：2024/06/14 11:22

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"])

阅读全文

0 0