css3伪元素选择什么,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...

在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？

首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。

比如需要选择出input标签中具有value属性的内容，就可以按以下方式

// css

input[value]{

color: #333;

}

// html

属性选择器还有以下匹配规则(E表示选择器，att表示属性值，val表示匹配的内容)

选择符简介

E[att]

具有att属性的E元素

E[att=val]

具有att属性且值为val的E元素

E[att^=val]

具有att属性且值以val开头的E元素

E[att$=val]

具有att属性且值以val结尾的E元素

E[att*=val]

具有att属性且值包含val的E元素

选择出input标签中type为password的元素

// css

input[type=password]{

color: #000

}

// html

选择出div标签中class以movie开头的元素

// css

div[class^=movie]{

color: brown

}

// html

天空之城

龙猫

起风了

武林外传

按照以上五种属性选择规则，可以自由的选择具有某些特征的元素，那么如果此时我需要选择的元素没有单独的属性呢。

比如我想要在一串列表中选择出奇数项和偶数项元素，分别设置不同的背景颜色，此时就需要结构伪类选择器登场了。

结构伪类选择器可以按下标选出指定项，比如第一项 :first-child，最后一项 :last-child，奇数项 :nth-child(even)，偶数项 :nth-child(odd)，第任何一项 :nth-child(n)

拿上述选择器做一个演示

// html

• 千与千寻的神隐
• 起风了
• 龙猫
• 天空之城
• 魔女宅急便

// css

ul :first-child {

color: brown // 选择ul的第一个子元素设置字体颜色为棕色

}

ul :last-child {

text-decoration: underline; // 选择ul的最后一个子元素设置下划线

}

ul :nth-child(even){

font-weight: bold;  // 选择ul的偶数子元素 设置字体加粗(下标从1开始)

}

标签：CSS3,val,伪类,元素,att,child,选择器,属性

来源： https://www.cnblogs.com/lubbre/p/14733626.html