CSS选择器

最新推荐文章于 2024-08-09 11:41:07 发布

正义的蜻蜓队长.

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量50

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_74169541/article/details/130724223

版权

一.css的引入方式

常见四种引入方式

1.行内样式：在标签内通过style属性实现（又叫做标签样式）

2.内嵌样式:通过style标签实现的（写在head标签内）

3.外链样式 : 通过 link标签进行导入（首先需要单独创建一个css文件,其次通过link标签将css文件进行引入）

4.导入样式 : 使用 import关键字进行导入（但是注意的是要放到 style标签内）

二.css选择器

1.基本选择器

包含以下四类

（1）标签选择器：根据标签的名称获取

（2） ID选择器：通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值（获取的是 ID 属性）

（3）类选择器：通过获取标签里面的 class 属性去设置对应的样式，设置的时候 .+class 的属性值

（4）通配符选择器：通过 * 设置对应的样式

注释：优先级为 ID > class > 标签 > 通配符

三.包含选择器

包含选择器包括以下三类

（1）子代选择器（获取的是某个标签的第一级子标签）

（2）后代选择器（获取的某个标签里面所有的子标签）

（3）分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html>
<head>
<title> 选择器 </title>
<style type = "text/css" >
/* 子代选择器 */
div .list > ul {
border : 1px solid red ;
}
/* 后代选择器 */
.list li {
border : 1px solid blue ;
}
/* 逗号择器 */
.one , .two , #first {
color : green ;
width : 200px ;
height : 200px ;
background : pink ;
border : 1px solid black ;
}
</style>

四.属性选择器

<!DOCTYPE html>
<html>
<head>
<title> 选择器 </title>
<style type = "text/css" >
/* 选择选中的额标签中存在的某个属性 */
div [ title ]{
border : 1px solid black ;
}
/* 确切的等于某个值 */
input [ type = "text" ]{
background : red ;
}
/* 属性值包含某个值 */
input [ type *= "e" ]{
background : blue ;
}
/* 属性值以某个值开头 */
input [ type ^= "e" ]{
 
}
/* 属性值以某个值结尾 */
input [ type $= "rl" ]{
background : red ;
}
/*+ 表示下一个标签 */
.msg + p {
border : 1px solid green ;
}
/* 属性等于某个属性值 */
[ title = " 这是一个标题 " ]{
color : red ;
}
</style>

五.伪类选择器

link—— 用于超链接点击之前
visited—— 用于超链接被点击之后
hover ——用于鼠标放在超链接上的时候（悬停在超链接上）
active ——用于超链接点击的时候（点击标签鼠标没有松手）

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type = "text/css" >
/* 点击之前的颜色 */
a : link {
color : red ;
}
/* 点击之后的颜色 */
a : visited {
color : green ;
}
/* 鼠标悬停的颜色 */
a : hover {
color : blue ;
 
/* 鼠标点击在上面但是不松手的时候 */
a : active {
color : pink ;
}
</style>

注意：对于a标签的四种状态的顺序是一定的，a:link a:visited a:hover a:active（四者不可以调换顺序，否则上一级失效）

六.伪元素选择器

 <!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>
p{
color: red;
font-size: 20px;
}
p::before{
content: "张三说";
color: blueviolet;
}
p::after{
content: "对不对？";
color: rgb(10, 1, 17);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

注意：使用before和after的时候一定给要写上content属性

正义的蜻蜓队长.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

常见四种引入方式1.行内样式：在标签内通过style属性实现（又叫做标签样式）2.内嵌样式:通过style标签实现的（写在head标签内）3.外链样式通过link标签进行导入（首先需要单独创建一个css文件,其次通过link标签将css文件进行引入）4.导入样式使用import关键字进行导入（但是注意的是要放到 style标签内）二.css选择器1.基本选择器包含以下四类（1）标签选择器：根据标签的名称获取（2）ID选择器：通过获取标签里面的。
复制链接

扫一扫