css伪类选择器
结构伪类
<body> <div> <ul> <li> <p>我是1</p> </li> <li> <p>我是2</p> </li> <li> <p>我是3</p> </li> <li> <p>我是4</p> </li> <li> <p>我是5</p> </li> <li> <p>我是6</p> </li> <li> <p>我是7</p> </li> <li> <p>我是8</p> </li> <li> <p>我是9</p> </li> </ul> </div> <style> li:nth-of-type(n){ color: red; } </style></body>
效果图
选择1-6
<body> <div> <ul> <li> <p>我是1</p> </li> <li> <p>我是2</p> </li> <li> <p>我是3</p> </li> <li> <p>我是4</p> </li> <li> <p>我是5</p> </li> <li> <p>我是6</p> </li> <li> <p>我是7</p> </li> <li> <p>我是8</p> </li> <li> <p>我是9</p> </li> </ul> </div> <style> li:nth-of-type(-n+6){ color: red; } </style></body>
效果截图展示
选择6-9
<body> <div> <ul> <li> <p>我是1</p> </li> <li> <p>我是2</p> </li> <li> <p>我是3</p> </li> <li> <p>我是4</p> </li> <li> <p>我是5</p> </li> <li> <p>我是6</p> </li> <li> <p>我是7</p> </li> <li> <p>我是8</p> </li> <li> <p>我是9</p> </li> </ul> </div> <style> li:nth-of-type(n+6){ color: red; } </style></body>
效果截图展示
状态伪类
将鼠标移入按钮变成小手并改变背景颜色
<body> <div> <button class="anniu">我是按钮</button> </div> <style> .anniu{ border: 0px; background-color: coral; color: white; } .anniu:hover { cursor: pointer; background-color: darkslategray; } </style></body>
移入前效果截图演示
移入后效果截图演示
盒子
div宽度150，高度300，内边距10px，边框5px。
<body> <div class="box"></div> <style> .box { box-sizing: border-box; width: 150px; height: 300px; padding: 10px; border: 5px; border-color: black; background-color: bisque; } </style></body>
效果截图演示
