CSS选择器总结

最新推荐文章于 2024-10-18 00:00:00 发布

Xxhny_

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量172

点赞数

文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/Xxhny_/article/details/129911109

版权

文章详细介绍了CSS选择器的定义和分类，包括基本选择器（如ID、类、标签和通配符选择器）、包含选择器（子代和后代选择器）、属性选择器、伪类和伪元素选择器。通过实例展示了如何使用这些选择器来定位和样式化HTML元素。

摘要由CSDN通过智能技术生成

一、选择器的定义

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

二、选择器的分类

2.1基本选择器

基本选择器包括：标签选择器（根据标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）

注意：id属性是唯一的，class不唯一思考：

四种选择器的优先级？ ID > class > 标签 > 通配符

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*div{
color: red;
}*/
/*#one{
color: blue;
}*/
/*.two{
color: yellow;
}*/
*{
color: green;
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
<div >
这是第一个div
</div>
</body>
</html>

2.2包含选择器

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
3.3 属性选择器
}
/*后代选择器*/
.list li{
border: 1px solid blue;
}
/*逗号择器*/
.one,.two,#first{
color: green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</ul>
</div>
</body>
</html>

2.3属性选择器

CSS属性选择器匹配那些具有特定属性或属性值的元素。

<!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"]{
background: green;
}
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</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>
<p id="msg1" ">这是一个段落</p>
</body>
</html>

2.4伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪类选择器）

: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>
</head>
<body>
<a href="https://www.baidu.com/">点我</a>
</body>
</html>

2.5伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

注意：要使用伪元素选择器一定要加上content属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "张三";
color: red;
}
p::after{
content: "李四";
color: green;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>