新增选择器

CSS3新增选择器

结构伪类选择器

  假设有如下结构

<ul>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ul>

  我们经常是要选定某个li,设置其样式，所以这个时候我们就得为该li加上类名，而CSS3提供了结构伪类选择器，就不需要添加类名了，比如我要选择第一个li,可以写为

li:first-child {

}

要选定最后一个元素可以写为

li:last-child {

}

选定第4个可写为

li:nth-child(4) {

}

li:first-child {
    background-color: red;
}
li:last-child {
    background-color: blue;
}
li:nth-child(4) {
    background-color: green;
}

如果要选定所有序号为偶数的，可以写为

li:nth-child(even) {

}

同理选择为奇数的可写为

li:nth-child(odd) {

}

li:nth-child(even) {
    background-color: skyblue;
}
li:nth-child(odd) {
    background-color: pink;
}

如果想选择所有3的倍数的，可以写为

li:nth-child(3n) {
    background-color: yellow;
}

同理，也可以选择4的倍数等等。

属性选择器

  假设有如下的结构

<div class="one"></div>
<div></div>
<div></div>
<div class="two"></div>

设置样式为

div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 0 auto;
}

显示效果为

  属性选择器的意思是，根据该标签是否有该属性而选择，比如我要选择所有含有class属性的盒子，那么我可以写为

div[class] {

}

div[class] {
    background-color: pink;
}

除了这种写法，还有三种其他的写法，比如

div[class^=font] {   /*选择所有类名以font开头的类*/

}
div[class$=font] {  /*选择所有类名以font结尾的类*/

}
div[class*=font] {  /*选择所有类名中包含font的类*/

}

伪元素

  下面我将介绍5个伪元素，前面3个了解就可以，后面两个需要熟练掌握。

  假设有以下结构

<p>人民网新华网央视网网信网中国网国际在线中国日报网中国经济网光明网央广网求是网中青在线</p>

  使用first-letter可以选择出第一个文字，如下

p::first-letter {
    font-size: 30px;
    color: red;
}

  使用first-line可以改变第一行文字的样式

p::first-line {
    color: red;
}

  使用selection可以改变选中文本的样式，比如

p::selection {
    color : white;
    background-color: red;   /*选中的文本红底白字*/
}

  假设有以下结构

<div>要</div>

现在使用before伪元素

div::before {
    content: "我";
}

那么效果是

可以发现在"要"字前面出现了一个"我"，可以将before理解为在div内容前面的一个盒子，盒子里的内容为"我"。注意,before盒子是在div盒子里面的。

  那么同理就可以明白after就是在div内容后面的一个盒子，before盒子和after盒子可以看做是div的子盒子。

div::after {
    content: "飞";
}