举例一些简单选择器
- 元素选择器
div{background-color:red;}
- 类选择器
.lei{background-color:red;}.lei.lei2{background-color:red;}
- id选择器
#idming{background-color:red;}
举例上下文选择器
- 后代选择器
.lei div{background-color:#999;}
- 父子选择器
body>div{background-color:pink;}
同级相邻选择器
.item.center + .item{background-color:pink;}
同级所有选择器(.item.center后面的所有的item类元素)
.item.center ~ .item{background-color:pink;}
结构伪类(不分组)选择器
- :first-child(匹配第一个子元素)
.hello>:first-child{background-color:wheat;}/*类选择器 .hello下面的第一个子元素*/
- :last-child (最后一个子元素)
.item>:last-child{background-color:wheat;}
- :nth-child (顺序选择器从1开始)
.item>:nth-child(3){background-color:wheat;/*数字从1开始*/}
- :nth-child (只选择偶数)
.item>:nth-child(2n){background-color:red;/*偶数div变成了红色*/}
- :nth-child (只选择奇数)
.item>:nth-child(2n-1){background-color:red;/*奇数div变成了红色*/}
- :nth-child (其他参数)偶数可以直接写 even 奇数可以直接写odd
.item>:nth-child(odd){background-color:red;/*奇数div变成了红色*/}
- :nth-child (n+4)从指定位置选择剩下的所有的元素 (从第四个位置开始选择剩下的所有元素)
:nth-child (-n+3)只取前3个
:nth-last-child (-n+3)只取最后3个
:nth-last-child (2)取倒数第2个
伪类分组选择器
- 元素按照类型分组
在分组中根据索引进行选择
1. :target的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">#login-form {display: none;}#login-form:target {display: block;}</style><title></title></head><body><button onclick="location='#login-form'">点击登陆</button><form action="" method="post" id="login-form"><label for="email">邮箱:</label><input type="email" name="email" id="email" /><br /><label for="password">密码:</label><input type="password" name="password" id="password" /><button type="button">登陆</button></form></body></html>
- 点击前
点击后
2. ：focus 当获取焦点的时候
<style type="text/css">#login-form {display: none;}#login-form:target {display: block;}/* 当鼠标获得焦点的时候 */input:focus {background-color: chartreuse;}</style><title></title></head><body><button onclick="location='#login-form'">点击登陆</button><form action="" method="post" id="login-form"><label for="email">邮箱:</label><input type="email" name="email" id="email" /><br /><label for="password">密码:</label><input type="password" name="password" id="password" /><button type="button">登陆</button></form></body>
- 效果如下
3. ::selection 设置选中文本的前景色与背景色
<style type="text/css">#login-form {display: none;}#login-form:target {display: block;}/* 设置选中文本的前景色与背景色*/input::selection {color: crimson;background-color: cyan;}</style><title></title></head><body><button onclick="location='#login-form'">点击登陆</button><form action="" method="post" id="login-form"><label for="email">邮箱:</label><input type="email" name="email" id="email" /><br /><label for="password">密码:</label><input type="password" name="password" id="password" /><button type="button">登陆</button></form></body>
- 效果如下
4. :not 选择器 用于选择不满足条件的元素(排除)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/*排除.hello类ul > li:not(.hello) {color: pink;}*//*排除第5个*/ul > li:not(:nth-of-type(5)) {color: pink;}</style></head><body><ul><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="hello">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li></ul></body></html>
- 效果如下
5.头部伪元素::before 和 尾部伪元素::after
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul > li:not(:nth-of-type(7)) {color: pink;}ul > li:not(.hello) {color: pink;}ul::before {content: "你好这里before增加一个头部伪元素";}ul::after {content: "你好这里是after增加一个尾部伪元素";}</style></head><body><ul><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="hello">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li><li class="zhu">你好朱老师</li></ul></body>
- 运行效果如下
总结
简单选择器
- 元素选择器 例如div{}
- 类选择器 例如 .class{}
- ID选择器 例如 #id{}
上下文选择器
- 后代选择器 例如.lei div{}
- 父子选择器 例如 body>div{}
- 同级相邻选择器 例如.item.center + .item{}