CSS选择器

选择器

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”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

HTML：

<p>学完了<span>前端</span>，继续学python</p>

CSS：

span{
    color: red;
}

就直接把span的color设置为red就可以了。

温馨提示

1. 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等

1. 无论这个标签藏的多深，一定能够被选择上
2. 选择的所有，而不是一个。

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}

class属性的特点

1. 
   
2. 类选择器可以被多种标签使用
3. 类名不能以数字开头
4. 同一个标签可以使用多个类选择器。用空格隔开

正确：

<h3 class="classone  classtwo">我是一个h3啊</h3>

错误：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误

ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{
   border:3px dashed green;
}

特别强调

1. ID是唯一的
2. 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;
}

这个例子会将所有 <p> 元素的第一行文字加粗。