CSS选择器

目录

一、什么是选择器？

二、常见的选择器

1、通配符选择器

2、标签选择器

3、id选择器

4、类选择器

5、组合选择器

6、属性选择器

---

一、什么是选择器？

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值是唯一的，只能对应于文档中某一个具体的元素。

例子

       
    
        
    


我是div

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

4、类选择器

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

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

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

例子

	
		
		
		
	
	
		
我是div1
		
我是div2
		
我是div3
		我是span
	

5、组合选择器

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

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

例子

       
    
        
    


william
我是p1
我是P2
我是div

6、属性选择器

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

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

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

例子

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

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

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

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

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

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