CSS选择器：
- 基本选择器：
- 通配符选择器：*；
- 元素选择器：元素标签；
- class选择器：相当于身份证上的名称；
- id选择器：相当于身份证号（唯一性）；
- 多元素组合选择器
- 多元素选择器 E,F 选择所有E元素或者F元素；
- 后代选择器 E F 选择所有属于E元素后代的F元素，即E元素的下n级元素F；
- 子元素选择器 E > F 选择所有E元素的子元素F，即E元素的下一级元素F；
- 毗邻选择器 E + F 选择所有紧随E元素的同级元素F，即跟在E后面的第一个兄弟元素；
- 属性选择器
- [att] 选择所有具有att属性的元素；
- [att=val] 选择所有att属性等于val的元素；
- [att~=val] 选择所有att属性包含val或者等于val的元素，val为一个单独的词；
- [att|=val] 选择所有att属性为val或者val-开头的元素；
- [att1][att2=val] 选择所有拥有att1属性同时具有att2等于val的元素；
- [att*=val] 选择所有att属性包含val的元素，val可以为一个词中的一部分；
- [att^=val] 选择所有att属性以val开头的元素，val可为一个词中的一部分；
- [att$=val] 选择所有att属性以val结束的，val可以为一个词中的一部分；
- 伪类
- 伪类选择器:link , :visited , :hover , :active;(可查看上一随笔：伪元素与伪类)
- 伪元素选择器:before , :after;
- 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元素。
- 结构性伪类
- E:nth-child(n) 表示E父级的所有子元素集合中的第n个子节点（2n(even)匹配偶数行，2n-1(odd)匹配奇数行）；
- E:nth-last-child(n) 表示E父级所有子元素（从后向前）集合中的第n个子节点；
- E:nth-of-type(n) 表示E父级的子元素E的集合中第n个节点（区分标签类型）；
- E:nth-last-of-type(n) 表示E父级的子元素E（从后向前）集合中的第n个子节点（区分标签类型）；
- E:empty 表示E元素中没有子节点（不能有空格、回车），子节点包含文本节点；
采用伪类实现轮播：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器--轮播</title>
<style>
body,ul{margin: 0; padding: 0;}
ul{list-style: none;}
img{border:0;vertical-align: middle;}
.banner{
position: relative;
width:375px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
.banner input{
display: none;
}
.banner .btn{
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
}
.btn label{
display: inline-block;
width: 25px;
height: 25px;
background-color: #ddd;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.banner .img{
position: relative;
width: 275px;
height: 275px;
margin: 0 auto;
}
.img li{
position: absolute;
top: 0;
left: 0;
}
.img li img{
display: none;
}
.img li:nth-child(1) img{
display: block;
}
.banner input:nth-child(1):checked ~ .btn label:nth-child(1){
background-color: red;
color: #fff;
}
.banner input:nth-child(1):checked ~ .img li:nth-child(1) img{
display: block;
}
.banner input:nth-child(3):checked ~ .btn label:nth-child(3){
background-color: red;
color: #fff;
}
.banner input:nth-child(3):checked ~ .img li:nth-child(3) img{
display: block;
}
.banner input:nth-child(4):checked ~ .btn label:nth-child(4){
background-color: red;
color: #fff;
}
.banner input:nth-child(4):checked ~ .img li:nth-child(4) img{
display: block;
}
.banner input:nth-child(5):checked ~ .btn label:nth-child(5){
background-color: red;
color: #fff;
}
.banner input:nth-child(5):checked ~ .img li:nth-child(5) img{
display: block;
}
.banner input:nth-child(2):checked ~ .btn label:nth-child(2){
background-color: red;
color: #fff;
}
.banner input:nth-child(2):checked ~ .img li:nth-child(2) img{
display: block;
}
</style>
</head>
<body>
<div class="banner">
<input type="radio" id="radio1" name="radio">
<input type="radio" id="radio2" name="radio">
<input type="radio" id="radio3" name="radio">
<input type="radio" id="radio4" name="radio">
<input type="radio" id="radio5" name="radio">
<div class="btn">
<label for="radio1" class="btn1">1</label>
<label for="radio2" class="btn2">2</label>
<label for="radio3" class="btn3">3</label>
<label for="radio4" class="btn4">4</label>
<label for="radio5" class="btn5">5</label>
</div>
<ul class="img">
<li class="img1"><img src="images/6.jpg" alt="img"></li>
<li class="img2"><img src="images/7.jpg" alt="img"></li>
<li class="img3"><img src="images/5.jpg" alt="img"></li>
<li class="img4"><img src="images/7.jpg" alt="img"></li>
<li class="img5"><img src="images/6.jpg" alt="img"></li>
</ul>
</div>
</body>
</html>
效果：
原理：使用input的checked属性来触发img的切换效果（初始默认设置第一个显示，其他隐藏），同时利用label与input的关联性来实现点击事件。注意：input元素组name属性需设置为相同的名称才为单选按钮组！
时间： 2024-10-11 15:52:43