CSS之伪类选择器，属性选择器
一.结构伪类选择器
伪类选择器一般的格式是使用冒号来表示 ：
一般其它的伪类选择器很少使用，但是a标签的个性化都是使用的伪类选择器来个性化，所以对于a标签的个性化需要用到
代码解释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /* 选择ul的第一个子元素 颜色为蓝色 */ ul li:first-child{ background: #5825ff; } /* 选择ul的最后一个子元素 颜色为红色 */ ul li:last-child{ background: #ff3b59; } /* 选择p1：定位到父元素，选择当前的第一个元素 选择当前的p元素的父元素，选择父级元素的第一个，并且是当前的元素生效 颜色为绿色 */ p:nth-child(2){ background: #19ff37; } /* 选中父元素，下的p元素的第二个，通过类型来选中 */ li:nth-of-type(2){ background: #fffa0f; } /* 伪类选择器使用的最多的地方还是a标签 通过伪类选择器可以对a标签进行个性化的设置， 对于链接提示非常有用 */ /* 给 a 标签一个背景颜色 颜色为粉色 */ a:hover{ background: #df0bff; } </style> </head> <body> <a href="#">a标签</a> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>
二.属性选择器
常用的四种属性选择器控制条件：
- = 必须完全与条件一致才能被选择
- *= 通配选择器，只有有满足的就行，不必完全满足，类似是或门
- ^= 以....开头，属性的字符串开头
- $= 以...结尾，属性中的字符串以什么结尾
代码解释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 8px; background: #6897ff; text-align: center; color: #20ff67; text-decoration: none; font: bolder 20px/50px Arial; } /* 存在id属性*/ a[id]{ background: #ff3b59; } /* = 绝对等于，等号后的值必须匹配才会css生效 *= 包含即可，属于通配符等于 */ a[class*=link]{ background: #fff70c; } /* ^= 以..开头的元素 这里以http开头的元素 */ a[href^=http]{ background: #5825ff; } /* $=jpg 以....结尾的元素 这里是以jpg为结束的元素 */ a[href$=jpg]{ background: #ff3b59; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links first" id="first">1</a> <a href="" class="link first">2</a> <a href="image/123.html">3</a> <a href="image/123.png">4</a> <a href="image/123.jpg">5</a> <a href="abc">6</a> <a href="/a.pdf">7</a> <a href="abc.doc">8</a> <a href="/abc/pdf">9</a> <a href="abcd.xml">10</a> </p> </body> </html>
