html5学习-CSS3-选择器

在CSS3中有各种结构性伪类选择器，至于为什么叫这个名字我也没弄明白呢，还有各种UI元素状态伪类选择器。

其中有四种用法：

[att = val]     等于么。。

[att *= val]   这个是att包含val这个字符串

[att ^= val]   这个是att以val开头的

att $= val]   这个是以val结尾的att

在结构性伪类选择器中有：

root/not/empty/target/first-child/last-child/nth-child/nth-last-child/nth-of-child/nth-last-of-child/only-child

这么多啊，，我自己也记不过来，一点点理解，意思挺简单的。

还有UI元素状态伪类选择器，包括：

E:hover / E:active / E:focus / E:enabled / E: disabled /E:read-only / E:read-write / E:checked / E:default /E:indeterminate / E:selection

这个就是为了方便修改样式表。

下面看个代码：

插入html代码比较麻烦，就直接截图了

上面的效果图：

你会发现这里面没有yellow颜色，其实是因为下面的 id^=sec覆盖掉了，要把第一个选择器放到最后才行效果就变了哦：

所以要注意这种情况，还有记得假如$=这个有时候要用 “\" 这种转义字符。

对应的就这些了。