一、选择器
有很多写法,一下是经常使用的
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用选择器</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <!-- 演示基本选择器 --> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 --> <div> <p>猪哥</p> <li>朱老师</li> <p>西门大官人</p> </div> <div> <p>欧阳克</p> <li>金莲妹妹</li> </div> <!-- 演示表单选择器 --> <form action=""> <label for="email">邮箱:</label> <input type="email"> <label for="password">密码:</label> <input type="password"> <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label> <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label> <button>登录</button> </form> </body> </html>
标签选择器:
实例
ul { border: 1px dashed red; margin: 0 auto; padding-left: 0; }
层级选择器:
实例
/* 层级(后代)选择器: 选择 ul 的后代元素*/ ul li { list-style:none; width: 40px; height: 40px; background-color:wheat; text-align: center; line-height: 40px; border-radius: 50%; display: inline-block; margin-left: 10px; box-shadow: 2px 2px 1px #888; }
实例
/* id选择器 */ #bg-blue { background-color: lightblue; }
类选择器:
实例
.bg-green { background-color: lightgreen; }
实例
li[id="bg-blue"] { border: 2px solid red; }
群组选择器:
实例
#bg-blue, .bg-green { border: 2px solid blue; }
实例
#bg-blue + * { background-color: yellow; }
兄弟选择器:
实例
/* 第2个小球后面的所有同级兄弟元素全部选中 */ #bg-blue ~ * { background-color: yellow; /* -yellow 值前加-,令其失效 */ }