css选择器总结 | 易学教程

#1.CSS基础选择器(逆战班学习总结)
##1.1 标签选择器
- 概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
- 语法：

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

- 作用：
  标签选择器 可以把某一类标签全部选择出来  比如所有的div标签  和 所有的 span标签
- 优点：
  是能快速为页面中同类型的标签统一样式
- 缺点：
  不能设计差异化样式。

p{
	 font-size: 16px;
	 color: red;
	 width: 200px;
	 height: 200px;
	 line-height: 200px;
 }

##1.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

 语法：
  - 类名选择器
      .类名  {   
          属性1:属性值1; 
          属性2:属性值2; 
          属性3:属性值3;     
      }
  - 标签
      <p class='类名'></p>
- 优点：
  - 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 
- 注意
  - 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
  - 长名称或词组可以使用中横线来为选择器命名。
  - 不要纯数字、中文等命名， 尽量使用英文字母来表示。

.a{
		font-size: 16px; color: red;
  }
	
.b{
	   font-weight: 800;font-family: 宋体;
  }

##1.3 id选择器

id选择器使用#进行标识，后面紧跟id名

- 其基本语法格式如下：
  - id选择器
        #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  - 标签
        <p id="id名"></p>
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
- 用法基本和类选择器相同。

#a{
	font-size: 16px; color: red;
}

##1.4 通配符选择器

概念
通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：
{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

*{
	margin: 0;padding: 0;
 }

#基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

#2. CSS复合选择器
#2.1 后代选择器（重点）

概念：
后代选择器又称为包含选择器
作用：
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级子级{属性:属性值;属性:属性值;}

语法：

  .class h3{color:red;font-size:16px;}
  
  - 当标签发生嵌套时，内层标签就成为外层标签的后代。
  - 
  - 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

 ul li{
	padding-left: 22px;
    padding-right: 24px;
	height: 50px;
	float: left;background-color:#36c899 ;
	line-height: 50px;
}

#2.2 子元素选择器

- 作用：
  子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
- 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

    .class>h3{color:red;font-size:14px;}

#2.3 交集选择器

- 条件
  交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
  
- 语法：

- 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

p.nav{
	background-color: red;
	font-size: 16px;
	width: 200px;
	height: 100px;
}

1.4 并集选择器（重点）

- 应用：
  - 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
- 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

.a,.b,.c{
	 color: #F00;
	 font-size: 16px;
	 line-height: 32px;
 }

来源：CSDN

作者：weixin_46110386

链接：https://blog.csdn.net/weixin_46110386/article/details/104463439

标签

css

css选择器

css样式