CSS选择器
目录
选择器
通用选择器
基本选择器
元素选择器
温馨提示
类选择器
优点
class属性的特点
ID选择器
特别强调
合并选择器
基本选择器的优先级
属性选择器
存在性属性选择器
特定属性值选择器
部分属性值选择器
伪类和伪元素
伪类
伪元素
选择器
CSS（Cascading Style Sheets）是网页设计的重要组成部分，它允许我们为HTML文档添加样式和布局。在CSS中，选择器是一种模式，用于选择要应用样式的HTML元素。
CSS语法 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）
通用选择器
通用选择器 * 可以与任何元素匹配，优先级最低，一般做样式初始化
*{
margin: 0;
padding: 0;
}
这个例子会将所有元素的外边距和内边距都设为零，从而消除默认的间距。
基本选择器
元素选择器
HTML文档中的元素，p、b、div、a、img、body等。
总的来说，我只要选择了一个元素来修改，那HTML的里的所有该元素都会因此而改变。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
p{
font-size:14px;
}
再比如说，我想让“学完前端，继续学python”这句话中的“前端”两个变为红色字体，那么我可以用标签把“前端”这两个字围起来，然后给标签加一个标签选择器。
HTML：
学完了前端，继续学python
CSS：
span{
color: red;
}就直接把span的color设置为red就可以了。
温馨提示
- 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
- 无论这个标签藏的多深，一定能够被选择上
- 选择的所有，而不是一个。
类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用
优点
灵活
你好
/*定义类选择器*/
.oneclass{
width:800px;
}
class属性的特点
- 类选择器可以被多种标签使用
- 类名不能以数字开头
- 同一个标签可以使用多个类选择器。用空格隔开
正确：
我是一个h3啊
错误：
我是一个h3啊
// 错误
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义
你好
#mytitle{
border:3px dashed green;
}
特别强调
- ID是唯一的
- ID不能以数字开头
合并选择器
语法：选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码
.header, .footer{
height:300px;
}
基本选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
属性选择器
属性选择器允许根据元素的属性值来选择元素。
存在性属性选择器
a[href] {
color: green;
}
这个例子会选择所有带有 href 属性的链接，并将它们的文字颜色设为绿色。
特定属性值选择器
input[type="text"] {
border: 1px solid #ccc;
}
这个例子会选择所有 type 属性值为 text 的输入框，并给它们添加一个浅灰色的边框。
部分属性值选择器
img[src*="logo"] {
max-width: 100px;
}
这个例子会选择所有 src 属性中包含 logo 的图片，并将它们的最大宽度设为100像素。
伪类和伪元素
伪类和伪元素用于选择那些不属于文档树的特定部分或状态的元素。
伪类
a:hover {
text-decoration: underline;
}
这个例子会选择所有鼠标悬停在链接上的时候，并给它们添加下划线。
伪元素
p::first-line {
font-weight: bold;
}
这个例子会将所有 元素的第一行文字加粗。