CSS多种选择器

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

Mr.laohei

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

阅读量430

点赞数

分类专栏： css 文章标签： HTML CSS

本文链接：https://blog.csdn.net/k157507281/article/details/97385700

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS选择器：就是给CSS指定要作用的标签，那个标签就是CSS选择器。

文章目录

基础选择器
扩展选择器

CSS分为基本选择器和扩展选择器。
基本选择器：

ID选择器（ID selector，IS）：可以为标有特定 id 的 HTML 元素指定特定的样式
标签选择器（element selector，ES）：以 html 标签作为 css 修饰所用的选择器
类选择器（class selector，CS）：对一类标签进行使用的选择器
通用选择器：针对所有标签都适用的选择器（一般不建议使用）

扩展选择器：

后代选择器
子类选择器
兄弟选择器
相邻兄弟选择器

基础选择器

ID选择器：以 “#” 来定义

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式.
语法格式：#S{...}
举例：

<head>
<meta charset="utf-8"> 
<style>
#demo
{
	color:red;
} 
</style>
</head>

然后在HTML标签使用ID中引用它：

<body>
<p id="demo">Hello World!</p>
<p>这是一个demo。</p>
</body>

任何的HTML标签都可以有id属性。标签的id可以任取，但是也有以下规则：

1、只能包含字母、数字、下划线
2、必须以字母开头
3、id名字不能与标签名字同名

另外HTML界面不能出现同一ID名字的两个选择器，比如给span标签一个名为demo的id，不能给予div标签一个名为demo的id，这样做是非法的。

标签选择器：选择器的名字就是HTML页面的标签

标签选择器，是页面上所有这一类型的标签所共有的样式特性
语法格式：S{...}
举例：

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p>italic text</p>

需要关注的是：

标签选择器可以是HTML属性下的所有标签。比如div、span、ul、li等等
使用标签选择器后，别选择的标签一定会被选上
标签选择器是选择选定标签的所有，并不是特定的哪一个

类选择器：使用 . 为标识

类选择器，是针对你想要的标签所使用的
语法格式：.S{...}
举例：class属性值为value的标签会匹配下面的样式

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">demo text</p>

注意：

英文圆点开头
类选择器的名称可以起中文外的任意名字

通用选择器

通用选择器是功能最强大的选择器，语法形式为：*{属性：属性值}
它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
*{color:red;}

扩展选择器

后代选择器

后代选择器又称为包含选择器
后代选择器可以选择作为某元素后代的元素
语法格式：

A B{...} （A和B都是标签，表示对处于A中的B标签有效）
.A B{...} （A是类名，B是标签）

举例：
以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>

<p>red text</p><!--文字是红色的-->

<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

子类选择器

子类选择器是一个比较有用的选择器，与后代选择器相比，子类选择器只能选择作为某元素子元素的元素
语法格式：

A >B{...} （A和B都是标签）
.A >B{...} （A是类名，B是标签）

举例：

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

注意：
子类选择器类似后代选择器，指定目标选择器必须处于某个选择器对应的元素内部，两者区别在于后代选择器允许其"子标签"甚至"子子标签"及嵌套更深的标签匹配相应的格式，而子类选择器强制指定目标选择器作为包含选择器对应的标签

兄弟选择器

兄弟选择器表示某元素后所有同级的指定元素
兄弟选择器是CSS3.0新增的一个样式选择器，语法格式为：A~B{...}
举例：

<style>
   div~p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p> 
<p>red text</p>

相邻兄弟选择器

相邻兄弟选择器：选择紧接在另一元素后的元素，且二者都有相同父类元素
相邻兄弟选择器使用了加号（+），语法格式：A+B{ ... }
举例：

<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。