文章目录

• 一、CSS选择器作用
• 二、CSS基础选择器
• • 1. 标签选择器
  • 2. 类选择器
  • 3. 类选择器的特殊用法-多类名
  • 4. id选择器
  • 5. 通配符选择器
  • 6. 基本选择器总结
• 三、CSS复合选择器
• • 1. 后代选择器
  • 2. 子元素选择器
  • 3. 交集选择器
  • 4. 并集选择器
  • 5. 链接伪类选择器
  • 6. 复合选择器总结

一、CSS选择器作用

找到特定的HTML页面元素

h3 { 
	color: red;
}
/*
选着h3标签，并把属性color值改为red
*/

选择器分为 基础选择器 和 复合选择器

二、CSS基础选择器

1. 标签选择器

• 概念：

  标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

• 语法：

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

• 作用：

  标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签

• 优点：

  是能快速为页面中同类型的标签统一样式

• 缺点：

  不能设计差异化样式

  
  

2. 类选择器

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

• 语法：

  • 类名选择器

  .类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
  }
  

• 标签

<p class='类名'></p>

• 优点：

  可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

• 注意

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

  2. 长名称或词组可以使用中横线来为选择器命名。

  3. 不要纯数字、中文等命名， 尽量使用英文字母来表示。

3. 类选择器的特殊用法-多类名

可以给标签指定多个类名，从而达到更多的选择目的。

<!--  各个类名中间用空格隔开-->
<div class="pink fontWeight font20">1</div>
<div class="font20">2</div>
<div class="font14 pink">3</div>
<div class="font14">4</div>

4. id选择器

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

• 其基本语法格式如下：

  • id选择器

  #id名 {
      	属性1:属性值1;
      	属性2:属性值2;
     	 	属性3:属性值3; 
  	  }
  

  • 标签

   <p id="id名"></p>
  

  • 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
  • 用法基本和类选择器相同。

id选择器和类选择器区别

• W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
  • 类选择器（class）, 是可以多次重复使用的。
  • id选择器, 只能使用一次。

5. 通配符选择器

• 概念

  通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

• 其基本语法格式如下：

* { 
    	属性1:属性值1; 
    	属性2:属性值2; 
    	属性3:属性值3; 
   }

/*例如*/
* {
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

• 注意：

  会匹配页面所有的元素，降低页面响应速度，不建议随便使用

6. 基本选择器总结

• 尽量少用通用选择器 *
• 尽量少用 ID 选择器
• 不使用无具体语义定义的标签选择器 div span

三、CSS复合选择器

• 作用

  为了可以选择更准确更精细的目标元素标签。

• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1. 后代选择器

• 概念：

  后代选择器又称为包含选择器

• 作用：

  用来选择元素或元素组的子孙后代

• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

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

/*如下*/
.class h3{color:red;font-size:16px;}

• 当标签发生嵌套时，内层标签就成为外层标签的后代。外层为父级，内层为子集。后代选择器能选着任何包含在外层标签内的内层标签

2. 子元素选择器

• 作用：

  子元素选择器只能选择作为某外层元素的下一层的内层元素。

• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

• 语法：

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

• 注意

  下一层不包括所有内层元素。

/* 比如：*/  
.demo > h3 {color: red;}   
/*说明  h3 一定是demo 下一层的内层元素。  demo 元素包含着h3。*/

3. 交集选择器

• 条件

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

• 语法：

  h3.class{color:red; font-size:25px;}
  /*
  其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
  */
  

• 注意：

  交集选择器 是 并且的意思。

  比如：   
  p.one   选择的是： 类名为 .one  的 段落标签。  
  

4. 并集选择器

• 应用：

  如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

• 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

• 语法：

.class,h3{
    color:red; 
    font-size:25px;
}
/*
注意选择器之间要有 , 号，
所有选择器都会执行后面样式
*/
比如  
.one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。  

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

5. 链接伪类选择器

伪类选择器很多，链接伪类只是其中一种。

• 作用：

  用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

 a:link      /* 未访问的链接 */
 a:visited   /* 已访问的链接 */
 a:hover     /* 鼠标移动到链接上 */
 a:active    /* 选定的链接 */

• 注意

  写的时候，要按照他们的顺序写（link --> visited --> hover --> active）

• 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover

• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

• 实际工作开发中，我们很少写全四个状态，一般我们写法如下：

  a {   /* a是标签选择器  所有的链接 */
  			font-weight: 700;
  			font-size: 16px;
  			color: gray;
  }
  a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
  			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
  }
  

6. 复合选择器总结