010. CSS 选择器

Posted 2023-04-23

参考技术A CSS 元素选择器(也称为类型选择器)通过 Node 节点名称匹配元素。

因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。

根据元素的类属性中的内容匹配元素。

类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

选择器会根据该元素的 ID 属性中的内容匹配元素。

元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

在 CSS 中，一个星号( * )就是一个通配选择器。它可以匹配任意类型的 html 元素。

在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

在 CSS3 中,星号( * )可以和命名空间组合使用:

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

相邻兄弟选择器 ( + ) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择 A 元素之后所有同层级 B 元素。

当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素。

通常用单个空格（ ）字符表示）组合了两个选择器，

如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父级，父级的父级，父级的父级的父级等）元素，则它们将被选择。

CSS 选择器列表（ , ），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素，即指定要选择的元素的特殊状态。

例如， :hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

具体详见

:: 伪选择器用于表示无法用 HTML 语义表达的实体。

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

例如， p::first-line 匹配所有 <p> 元素的第一行。

具体详见

前端基础css 选择器

css 选择器

• css 选择器
• • 1. css 选择器的定义
  • 2. css 选择器的种类
  • 3. 标签选择器
  • 4. 类选择器
  • 5. 层级选择器(后代选择器)
  • 6. id选择器
  • 7. 组选择器
  • 8. 伪类选择器
  • 9. 小结

css 选择器

学习目标

• 能够说出 css 选择器的种类

---

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

1. 标签选择器
2. 类选择器
3. 层级选择器(后代选择器)
4. id选择器
5. 组选择器
6. 伪类选择器

3. 标签选择器

根据标签来选择标签， 以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

 <style type="text/css">
     p
         color: red;
     
 </style>
 
 <div>hello</div>
 <p>hello</p>

4. 类选择器

根据类名来选择标签， 以 . 开头,一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

<style type="text/css">
    .bluecolor:blue
    .bigfont-size:20px
    .boxwidth:100px;height:100px;background:gold 
</style>

<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签， 以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

<style type="text/css">
    div p
        color: red;
    
    .conwidth:300px;height:80px;background:green
    .con spancolor:red
    .con .pinkcolor:pink
    .con .goldcolor:gold    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

<style type="text/css">
    #boxcolor:red 
</style>

<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id="box"也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签， 以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

<style type="text/css">
    .box1,.box2,.box3width:100px;height:100px
    .box1background:red
    .box2background:pink
    .box2background:gold
</style>

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">
    .box1width:100px;height:100px;background:gold;
    .box1:hoverwidth:300px;
</style>

<div class="box1">这是第一个div</div>

9. 小结

• css 选择器就是用来选择标签设置样式的
• 常用的 css 选择器有六种，分别是:
  1. 标签选择器
  2. 类选择器
  3. 层级选择器(后代选择器)
  4. id选择器
  5. 组选择器
  6. 伪类选择器

---

加油!

感谢!

努力!