4.css选择器

最新推荐文章于 2024-04-22 20:40:29 发布

钱难有，好想有钱

最新推荐文章于 2024-04-22 20:40:29 发布

阅读量90

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_69075518/article/details/127206066

版权

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

1，元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

2，id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
实例：这条 CSS 规则将应用于 id="para1" 的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>

3，类选择器

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例：在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

4，复合选择器

4.1交集选择器

作用：选中同时满足多个条件的元素

语法：选择器1选择器2选择器3····{}

注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位实例：

4.2并集选择器

作用：同时选中满足条件的元素

语法：选择器1,选择器2,选择器3····{}

实例：

<!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>Document</title>
    <style>
      .red{
        color: red;
      }
      div#red1.red{
        font-size: 34px;
      }
      h1,h3{
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red" id="red1">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>
</html>

5，关系选择器

元素之间的关系

父子关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先后代关系

祖先元素：直接或间接包含的元素，包含父元素

后代元素：直接或间接被包含的元素，包含子元素

兄弟关系

拥有共同父元素的元素

5.1子关系选择器

作用：选中指定的父元素下面指定的子元素

语法：父元素>子元素{}

例如：div>p,.big>p,#big>p{}

5.2后代选择器

作用：选中指定祖先元素下面指定的后代元素

语法：祖先元素后代元素{}

例如：#big span{}

5.3相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

语法：兄+弟{}

5.4通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

语法：兄～弟{}

6，伪类选择器和伪元素选择器

6.1伪类选择器

伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3、 :nth-child() 选中第n个子元素

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似，

不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

将符合条件的元素从选择器中去除

6.2伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

实例：

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>您可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果！</p>

</body>
</html>