css3属性选择器+实例

来源：互联网发布：天刀男捏脸数据导入编辑：程序博客网时间：2024/06/17 08:40

css3-选择器(属性选择器)

[att] 匹配所有具有att属性的

[att=val] 匹配所有att属性等于“val”的

[att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)

[att|=val] 匹配所有att属性以val-' 开头的或等于“val”（比如说zh-cn）

[att*=val] 匹配所有att属性 包含'val'的 (val可以是字母)

[att^=val] 匹配所有att属性 'val'开头的

[att$=val] 匹配所有att属性 'val'结束的

css3选择器---结构性伪类

E:nth-child(n) 表示E父级的第n个子节点

E:nth-last-child(n) 表示E父级中的第n个字节点，从后向前计算

e~n相对应的关系

------>（需E选择器能选中此元素）

E:nth-of-type(n) 表示E父级中的第n个字节点，

E:nth-last-of-type(n) 表示E父级中的第n个字节点，从后向前计算

------->（需E选择器能选中此元素,且区分标签类型）

E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)

E:nth-child(even) 匹配偶数行 同p:nth-child(2n)

E:empty 表示E元素中没有子节点（不能有空格,回车）。注意：子节点包含文本节点

css3伪类

E:target 当a标签获取焦点href=''所对应的 E元素锚点

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E:selection 表示E元素在用户选中文字时

E:not(selector) 选择非 selector 选择器的每个元素。

E~F 表示E元素后的所有兄弟F元素

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="作者">  <meta name="Keywords" content="关键字">  <meta name="Description" content="描述">  <title>wq轮播</title>  <style type="text/css">*{margin:0;padding:0;}body{font:14px 'MIcrosoft yahei';}.clearfix:after{content:'';display:block;clear:both;}.fl{float:left;}.fr{float:right;}.box{    width:800px;height:400px;margin:50px auto;border:1px solid red;position:relative;        }.box .botton{   width:100%;   text-align:center;   position:absolute;   bottom:0;   opacity:0.5;   }.box .botton label{   display:inline-block;width:32px;height:32px;border-radius:50%;line-height:32px;text-align:center;background:#efefef;font-size:22px;}input{    border:1px solid red;   background:red;   margin:20px auto;   display:none;   }input#radio1:checked ~ .botton label:nth-child(1){background-color: red;color:#fff;  }   input#radio2:checked ~ .botton label:nth-child(2){background-color: red;color:#fff;  }   input#radio3:checked ~ .botton label:nth-child(3){background-color: red;color:#fff;  }   input#radio4:checked ~ .botton label:nth-child(4){background-color: red;color:#fff;  }   input#radio5:checked ~ .botton label:nth-child(5){background-color: red;color:#fff;  } ul li{    list-style:none;display:none;text-align:center;}input#radio1:checked ~ ul li:nth-child(1){display:block;  }input#radio2:checked ~ ul li:nth-child(2){display:block;  }input#radio3:checked ~ ul li:nth-child(3){display:block;  }input#radio4:checked ~ ul li:nth-child(4){display:block;  }input#radio5:checked ~ ul li:nth-child(5){display:block;  }</style> </head> <body>    <div  class="box"> <input type="radio" name=" "id="radio1"value=""  checked/> <input type="radio" name=" "id="radio2"value=""/> <input type="radio" name=" "id="radio3"value=""/> <input type="radio" name=" "id="radio4"value=""/> <input type="radio" name=" "id="radio5"value=""/><div  class="botton">  <label for="radio1">1</label>  <label for="radio2">2</label>  <label for="radio3">3</label>  <label for="radio4">4</label>  <label for="radio5">5</label>       </div><ul><li><img src="images/1.jpg" width="" height="" border="0" alt=""></li><li><img src="images/2.jpg" width="" height="" border="0" alt=""></li><li><img src="images/3.jpg" width="" height="" border="0" alt=""></li><li><img src="images/4.jpg" width="" height="" border="0" alt=""></li><li><img src="images/5.jpg" width="" height="" border="0" alt=""></li></ul>        </div>  </body></html>

阅读全文

0 0