css的选择器详情

最新推荐文章于 2024-07-06 20:00:00 发布

小余132

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量198

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_74429510/article/details/130704921

版权

1.什么是选择器：

css选择器是css中的重要部分，是为了选择某一个标签或者元素，为选择的标签或者元素设置相应的html元素样式

选择器可以分为五类：简单选择器，伪类选择器，组合器选择器，伪元素选择器，属性选择器

2.选择器的类型

2.1简单选择器

2.1.1标签选择器

结构为：标签名{属性值}

标签选择器是通过标签的名称来实现相应的html的元素样式的设置。

具体例子如下：

<style>
    p{
        color: red;
    }
</style>
<body>
    <p>
        标签选择器
    </p>
</body>

注意：标签选择器选择的是一类标签，而不是单独的一个。

2.1.2 id选择器

结构为:#id属性值{属性值}

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

具体例子如下：

<style>
        #one{
            color: aqua;
        }
</style>
<body>
    <div id="one">我是大帅哥</div>
</body>

注意：id选择器属性值不能重复，一个标签上只能有一个id属性值，一个id选择器只能选中一个标签。

2.1.3 类选择器

结构为：.class属性值（也就是类名）{属性值}

类选择器选择有特定 class 属性的 HTML 元素。

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

HTML 元素也可以引用多个类。

具体例子如下：

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

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p> 

</body>
</html>

注意：类名不能以数字开头！

2.1.4 通用选择器（通配符选择器）

结构为：*{属性值}

通用选择器（*）选择页面上的所有的 HTML 元素。

通用选择器会将除了已经设置了样式的标签之外全部用通用选择器所用的形式

通用选择器不常用。

具体例子如下：

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

<h1>Hello world!</h1>

<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

2.2 组合器选择器

2.2.1 后代选择器 (空格)

结构为：标签（空格）子标签{属性值}

后代选择器匹配属于指定元素后代的所有元素。

具体例子如下：

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

</body>
</html>

2.2.2 子选择器（>）

结构为：标签 > 子标签{属性值}

子选择器匹配属于指定元素子元素的所有元素。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>

<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>

</body>
</html>

2.2.3 相邻兄弟选择器（+）

结构为：标签1 + 标签2{属性值}

相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。

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

设置标签1下方的一个标签2的属性值

具体例子如下：

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>相邻兄弟选择器</h1>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

2.2.4 通用兄弟选择器 (`~`)

结构为：标签1~标签2{属性值}

通用的兄弟选择器（~）选择指定元素的所有同级元素。

设置标签1下方的所有标签2的属性值

具体例子如下：

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

</body>
</html>

2.2.5 组合器选择器表格

语法	用法
祖先（空格）后代	后代全部选择
父亲 > 儿子	儿子单个选择
兄+弟	相邻兄弟选择(必须是兄弟且严格相邻)
兄~弟	全部兄弟选择

2.3 伪类选择器

伪类用于定义元素的特殊状态

伪类：同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要是用来渲染a标签不同的状态下的不同的样式

语法	用法
便签名：link	点击之前的样式
便签名：visited	被访问之后的样式
便签名：hover	鼠标放在上的时候（悬停）的样式
便签名：active	鼠标点击标签但是不松手的时候的样式

注：link和visited是超链接专门使用的，而hover和active任何标签都可以使用

具体代码如下：

<!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>伪类选择器</title>
<style>
/*超链接点击之前的颜色是红色*/
a:link{
color: red;
}
/*超链接点击之后的颜色是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停的时候的颜色绿色*/
a:hover{
color:green;
}
注意：对于a标签的四种状态的顺序是一定的，a:link a:visited a:hover a:active
3.5 伪元素选择器
注意：使用before和after的时候一定给要写上content属性
4. css常见的样式
4.1 css的基本语法
/*超链接被激活的时候的颜色是蓝色*/
a:active{
color:blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" >戳我</a>
</body>
</html>

2.4 伪元素选择器

结构为：标签：：伪元素

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	选择用户选择的元素部分。

注：befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

具体例子如下：

<!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>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content: "张三说";
color: blueviolet;
}
p::after{
content: "对不对？";
color: rgb(10, 1, 17);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

2.5 属性选择器

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

css属性选择器：

具体例子如下：

<!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>属性选择器</title>
<style>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: aquamarine;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *= "e"]{
background: blue;
}
/*属性中的值以XXX开始*/
input[type ^= "e"]{
background-color: blueviolet;
}
/*属性中的值以XXX结尾*/
input[type $= "rl"]{
background-color: rgb(14, 139, 18);
3.4 伪类选择器
伪类：同一个标签，在不同的状态下，有不同的样式
伪类通过冒号表示
最早的时候主要是用来渲染a标签不同的状态下的不同的样式
超链接点击之前 ------ :link
超链接被访问之后 -------- :visited
鼠标放在超链接上的时候（悬停） ------- :hover
超链接激活的时候（鼠标点击标签但是不松手的时候）------ : active
}
/*表示下一个标签*/
.msg + p{
color: darkgoldenrod;
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: chartreuse;
}
</style>
</head>
<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p id="msg2">这是一个段落</p>
</body>
</html>