选择器练习
<!DOCTYPE html> <html> <mate charset="utf-8"> <title>CSS选择器</title> <style type="text/css"> /*标签选择器:根据标签名称来选择页面元素*/ ul{ /*padding:0px;*/ margin:0; width:700px; border:1px dashed #555; padding:10px 5px; } /*子块撑开父级区块*/ ul:after{ content:''; display:block; clear:both; } ul li{ list-style: none; float:left; width:60px; height:60px; line-height:60px; text-align:center; font-size:22px; border-radius:50%; box-shadow: 2px 2px 2px #888; background-color:skyblue; margin:5px; } /*ID选择器*/ #item1{ background-color:red; } /*类选择器/class选择器*/ item2{ background: yellow; } /*属性选择器:属性名*/ ul li[class]{ background: #eee; } /*属性选择器·属性值*/ ul li[class="item2"]{ background: green; } /*属性选择器:以指定属性值开头的元素*/ ul li[class=^="one"]{ background:#444; } /*属性选择器:以指定值结尾的元素*/ ul li[class$="two"]{ background:#888; } /*属性选择器,属性中包含指定的子串*/ ul li[class*="o'"]{ background: #343435; } /*后代选择器/层级选择器/派生选择器*/ body ul li{ border:1px solid #111; } /*子选择器*/ ul > li[class$="three"]{ background-color:#121; color:#fff; } /*相邻选择器*/ ul li[class$="two"] ~ *{ background-color:#f3f; } /*相邻兄弟选择器*/ ul li[class$="two"] + li{ background-color:blue; } /*群组选择器*/ h1,p,a{ font-size: 3rem; color: red; } /*伪类选择器·链接*/ a{ font-size:2rem; } /*访问前*/ a:link{ color:#988432; } /*访问后*/ a:visited{ color:#ff00ff; } /*获取焦点的时候*/ a:focus{ color:pink; } /*鼠标悬停时*/ a:hover{ color:black; } /*鼠标点击激活时*/ a:active{ color:red; font-size:3rem; } /*伪类选择器·位置*/ ul li:second-child { background-color:#frfrfr!important; } ul li:last-child { background-color: red; } ul li:nth-child(2) { background-color: red; } ul li:nth-child(odd) { /*偶数: even,奇数 odd*/ background-color: purple!important; } /*伪类选择器: 根据子元素的数量*/ ol :only-child { background-color: lawngreen; } ol li:only-child { background-color: lawngreen; } ul li:nth-last-child(3) { background-color: wheat; } ol li:nth-of-type(2) { background-color: wheat; } :empty { width: 220px; height: 270px; background-color: coral; } :empty:after { content: '看到我了吗?亲'; } :empty:before { /*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/ content: url("images/1.jpg"); } </style> <head> <body> <ul> <li id="item1">1</li> <li class="item2">2</li> <li class="one">3</li> <li class="two">4</li> <li class="three">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <h1>css选择器大法</h1> <p>css选择器非常重要,特殊是对于学习js,jquery以及其它前端框</p> <a href="http://php.cn">PHP中文网</a> <ol> <li>列表项1</li> </ol> <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol> <div></div> </body> </head> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
选择器控制效果图
网页元素中常用单位px em rem
总结:
学习form表单设计
常用元素单位px(屏幕像素,相对于显示器),em(相对于当前元素字体大小,默认1em=16px),rem(根元素单位 1rem=1em=16px)
常用选择器学习
标签选择器、ID选择器、类/CLASS选择器、伪类选择器、属性选择器等