文章目录
前言
随着人工智能的不断发展,社会不断的进步,我们一定要努力学习,掌握并学会熟练的运用我们学的知识,接下来是根据学习的知识,总结CSS中的选择器!!!
一、选择器是什么?
CSS选择器是CSS规则的第一部分.它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。 选择器所选择的元素,叫做“选择器的对象”。
二、选择器类型
1.基本选择器
基本选择器包含:
1. 标签选择器(元素选择器)
根据元素名称(标签)来设置对应的样式。
代码示例如下:
<style>
/*标签选择器*/
div{
color: brown;
其他属性:属性值;
}
p{
color: aqua;
其他属性:属性值;
}
</style>
2. ID选择器
id 选择器使用 HTML 元素的 id 属性来设置对应的样式。
使用时通过要请写一个井号(#),后跟该元素的 id。(优点:能够单独对标签进行修改)
代码示例如下:
<style>
/*ID选择器*/
#id名{
color: aqua;
属性:属性值;
}
<\style>
3.类选择器
通过标签里class属性来设置对应的样式(优点是能够同时对多个标签进行修改样式)。
代码示例如下:
<style>
/*类选择器*/
.类名{
color: brown;
属性:属性值;
........}
<\style>
4.通配符选择器
通过*设置对应的样式(优点是基本选择器中使用范围最广的)
代码示例如下:
<style>
/*通配符选择器*/
*{
color: chartreuse;
属性:属性值;
}
</style>
优先级顺序如下:
ID选择器>类选择器>标签选择器>通配符选择器
2.包含选择器
子代选择器 | 获取的某个标签的第一级子标签 |
后代选择器 | 获取的某个标签里面所有的子标签 |
分组选择器 | 可以设定多个标签,使用逗号进行分割 |
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>包含选择器</title>
<style>
/*子代选择器*/
div.list>ul{
border: 2px solid greenyellow;
}
/*后代选择器*/
.list li{
border: 1px solid orangered;
}
/*分组选择器*/
#kun,.cai,h1{
color: aqua;
}
</style>
</head>
<body>
<h1>kunkun</h1>
<p id="kun"> 偶像练习生</p>
<div class="cai">我喜欢的</div>
<div class="list">
<ul>
<li>唱</li>
<li>跳舞</li>
<li>rap</li>
<li>篮球</li>
<li>涂唇膏</li>
</ul> </div>
</body>
</html>
3. 属性选择器
设置带有特定属性或属性值的元素样式,或者说是获取某一属性来进行样式修改
用法:
标签名[属性名] | 选中某个标签中存在的某个值 |
标签名[属性=属性值] | 确切的等于某个值 |
标签名[属性 *=属性值] | 属性里面包含某个值 |
标签名[属性 ^=属性值的开头值] | 属性中的值以XXX开始 |
标签名[属性 $=属性值的结尾值] | 属性中的值以XXX结尾 |
4.伪类选择器
在不同的状态中有不同的样式,通过这个特性也可以对标签进行样式修改
通过冒号(:)表示
它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
:link | 超链接点击之前 |
:visited | 超链接被访问之后 |
:hover | 鼠标在超链接上悬停 |
:active | 鼠标点击标签但是不松手的时候 |
代码示例如下:
<style>
/*点击前*/
a:link{
color: aqua;
属性:属性值
}
/*点击后*/
a:visited{
color: coral;
属性:属性值
}
/*悬停*/
a:hover{
color: crimson;
属性:属性值
}
/*激活*/
a:active{
color: yellow;
属性:属性值
}
</style>
5.伪元素选择器
它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
*使用时,使用before和after的时候一定给要写上content属性
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
::selection {
color: red;
background: yellow;
}
p{
color: rgb(235, 28, 132);
}
p::before{
content: "董明珠说";
color: rgb(247, 10, 140);
}
p::after{
content: "泰裤辣";
color: rgb(241, 12, 130);
}
</style>
</head>
<body>
<p>我觉得</p>
</body>
</html>