举例一些简单选择器
- 元素选择器
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{}