学习了CSS常用选择器比如:标签选择器,层级选择器,id选择器,类class选择器,属性选择器,群组选择器,相邻选择器,兄弟选择器以及伪元素的使用方法:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <title>CSS常用选择器</title> <style type="text/css"> *{ margin:0px; padding: 0px; } /*标签选择器*/ ul{ border: 1px dashed red; overflow: hidden; padding: 10px; } /*层级选择器*/ ul li{ list-style:none; float: left; width:40px; height:40px; background-color:wheat; line-height: 40px; text-align: center; border-radius: 50%; margin-left: 8px; box-shadow: 2px 2px 1px red; } /*id选择器*/ #bg-pink{ background-color: pink; } /*class选择器*/ .bg-yellow{ background-color: yellow; } /*属性选择器*/ li[bg-pink]{ border: 2px solid #000; } /*相邻选择器*/ .bg-yellow + *{ background-color: #ccc; } /*兄弟选择器*/ #bg-pink~ *{ background-color: blue; } /*群组选择器*/ #bg-pink .bg-yellow{ border: 2px solid #ccc; } /*伪类:子元素选择器*/ /*第一个子类*/ ul :first-child{ background-color: red; } /*最后一个子类*/ ul :last-child{ background-color: yellow; } /*双数子类*/ ul :nth-child(2n){ background-color: red; } /*单数子类*/ ul :nth-child(2n+1){ background-color: red; } /*伪类:类型选择器*/ ul li:first-of-type{ background-color: pink; } ul li:nth-of-type(5){ background-color: #fff; } /*选择测试8*/ div:nth-child(3) p:nth-of-type(2){ background-color: red; } /*直接用类型p标签选择会出现2个div里面第二个p元素都变色*/ p:nth-of-type(2){ background-color: red; } /*启用背景颜色为粉色*/ form :enabled{ background-color: pink; border:1px solid #ccc; } /*单选按钮选中文本设置字体颜色为红色,使用到相邻选择器*/ form :checked + * { color: red; } /*焦点背景颜色为黄色*/ form :focus{ background-color:yellow; } /*错误格式信息显示红色*/ form :invalid{ color: red; } </style> </head> <body> <div> <ul> <li class="bg-yellow">1</li> <li>2</li> <li id="bg-pink">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div> <p>测试一</p> <li>测试2</li> <p>测试3</p> <li>测试4</li> </div> <div> <p>测试5</p> <li>测试6</li> <li>测试7</li> <p>测试8</p> </div> <!-- 表单选择器使用方法 --> <div> <form method="get" action="xx.phph"> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="请填写邮箱地址"> <br> <label for="pwd">密码:</label> <input type="password" name="pwd" id="pwd" placeholder="请输入密码"> <br> <label> <input type="radio" name="save" value="7" checked>保存一周 </label> <label> <input type="radio" name="save" value="30">保存一个月 </label> <br> <button>登入</button> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
通过学习这些选择器从中学的了很多,我比较喜欢常用的还是class选择器以及层级选择器
伪元素老师也了讲了许多,需要在实际中去运用才能完全掌握,我觉得我现在还是皮毛。不能完全掌控。
还是就是后面的表单里面的focus焦点以及checked不能成功测试出来,开始focus是ok的后面不知道怎么就不生效了。可以帮忙帮我找下错误,谢谢~!