CSS选择器

努力学习javaee的小白选手

已于 2022-05-20 00:23:43 修改

阅读量129

点赞数

分类专栏： javaee 文章标签： css css3 前端

于 2022-05-20 00:17:32 首次发布

本文链接：https://blog.csdn.net/m0_50555031/article/details/124874322

版权

javaee 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、什么是选择器？

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。

二、常见的选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，下面介绍几种常见的选择器。

1、通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

例子：使用该选择器定义样式，清除所有HTML标记的默认边距。

*{
margin：0；       /*定义外边距*/
padding：0；     /*定义内边距*/
}

但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

2、标签选择器

CSS元素标签器(也称为元素选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

基本语法格式：具体标签名称｛属性1：属性值1；属性2：属性值2；｝

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子：在html中只在使用该标签，就会按照css样式来显示

span {
  background-color: DodgerBlue;
  color: #ffffff;
}

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

3、id选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

例子

<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>id选择器</title>
    <style>
        #poetry{
            font-size: 25px;
            margin: auto;
            color: #fefefe;
        }
    </style>
</head>
<body>
<div id="poetry">我是div</div>
</body>
</html>

注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

4、类选择器

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

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style type="text/css">
			.mydiv {
				color: red;
				font-size: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div class="mydiv">我是div2</div>
		<div class="mydiv">我是div3</div>
		<span>我是span</span>
	</body>
</html>

5、组合选择器

组合选择器是同时匹配多个选择器，组合多个选择器，选择器之间用逗号隔开，如em,strong{ }。

语法格式：标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}

例子

<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>组合选择器</title>
    <style>
        p { /*标签选择器*/
            font-size: 25px;
            color: #001234;
        }
 
        .myfont { /*类选择器*/
            font-size: 18px;
            font-weight: bold;
            color: #fefefe;
        }
    </style>
</head>
<body>
<p>william</p>
<p class="myfont">我是p1</p>
<p class="myfont">我是P2</p>
<div class="myfont">我是div</div>
</body>
</html>

6、属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}

注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

例子

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

以上浅浅的介绍6种~
参考链接：CSS 选择器 - CSS（层叠样式表） | MDN (mozilla.org)