css选择器的分类
1.基础选择器
2.层次选择器
3.伪类选择器
4.伪元素
5.属性选择器
1基础选择器
基础选择器中有以下几个:
选择器 | 类型 | 功能描述 |
* | 通配选择器 | 选择文档中所有HTML元素 |
E | 元素选择器 | 选择指定类型的HTML元素 |
#id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
.class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
E,F | 群组选择器 | 将每一个选择器匹配的元素集合并 |
通配选择器 *
简而言之,就是将所有的内容设置成这个样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<a href="#">这是一个链接</a>
</body>
</html>
通配符选择器 *内设置文字颜色为红色,<p>与<a>标签都设置为了红色
1.1元素选择器
将所有该元素设置为同一个属性
下例以<p>为例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
p{
text-indent:2em;
}
</style>
</head>
<body>
<p>这是第一个段落</p><p>这是第二个段落</p>
</body>
</html>
所有<p>标签缩进了两个字符
1.2id选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
#id{
font-size: 10px;
}
</style>
</head>
<body>
<div id="id">这是一段内容</div>
<div>这是一段内容</div>
</body>
</html>
由此可见,id选择器会将含有#id的div内的内容设置为#id里面的属性
1.3类选择器
类选择器与id选择器类似,
不过是使用 . 来标识
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
.class{
font-size: 10px;
}
</style>
</head>
<body>
<div class="class">这是一段内容</div>
<div>这是一段内容</div>
</body>
</html>
由此可见,类选择器会将含有.class的div内的内容设置为.class里面的属性
1.4群组选择器
将多个选择器设置为同一个属性 这之中用 , 隔开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
p,a,.class{
font-size: 10px;
}
</style>
</head>
<body>
<div class="class">这是一段内容</div>
<div>这是一段内容</div>
<p>这是一个段落</p>
<a href="#">这是一个链接</a>
</body>
</html>
p,a,.class这一个整体被称为群组选择器,群组选择器的属性同样也是这些单独选择器的属性
2层次选择器
层次选择器含有以下几个选择器:
选择器 | 类型 | 功能描述 |
E F | 后代选择器(包含选择器) | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面 |
2.1后代选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
.class{
font-size: 10px;
}
.class .class1{
font-size: 15px;
}
.class1{
font-size: 20px;
}
</style>
</head>
<body>
<div class="class">这是一段内容
<div class="class1">这是一段内容
</div>
</div>
<div class="class1">这是一段内容</div>
</body>
</html>
明显的是,在<div class="class">中的<div class="class1">比单独的<div class="class1">要小
说明后代选择器是在class="class"里匹配到的class="class1"的属性
2.2子选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
ul li>p {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<p>一级菜单</p>
<div>
<p>二级菜单</p>
</div>
</li>
</ul>
</body>
</html>
2.3相邻兄弟选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
li:first-of-type + li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
</body>
</html>
3伪类选择器
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
由于选择器过多,简单挑选一个hover进行演示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: red;
}
.s1:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="s1"></div>
</body>
</html>
鼠标没有悬停在盒子中
鼠标悬停在盒子中
4伪元素
以p::after举例
<head>
<meta charset="UTF-8">
<title>test1</title>
<style type="text/css">
p::after{
content:"p";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>
</body>
</html>
需要添加内容就需要content属性
添加属性是设置的content的内容的属性
5属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
<html lang="en">
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<hr />
<h1>无法应用样式:</h1>
<h2>Hello world</h2>
</body>
</html>
<html lang="en">
<head>
<style type="text/css">
a[href][title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<a title="#" href="#">test</a>
<hr />
<h1>无法应用样式:</h1>
<a href="#">test</a>
</body>
</html>
根据具体属性值选择
<html lang="en">
<head><meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/* 某个标签里面的某个属性值 */
.container[class]{ color:red; }
/* div[title]{ color: red } */ /* 确切到某一个值 */
input[type*="e"]{ color: red }
/* 以什么为开始 */
input[type^="e"]{ color: blue }
/* 以什么为结束 */
input[type$="rl"]{ color: green }
/* 表示下一个标签 */
.msg+p{ color: yellow }
/* 属性名称可以等于某一个值 */
[title="这是一个标题"]{ color: blue }
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="王五">
<input type="url" name="" id="" value="李四">
<hr>
<div class="msg">这是第三个div</div>
<p id="msg2">这是一个段落</p>
</body>
</html>