CSS选择器

CSS选择器

1.选择器的作用

找到特定的HTML页面元素

CSS选择器是用来选择标签用的,把我们想要的标签选择出来

2.CSS基础选择器

2.1 标签选择器

• 概念:

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

• 语法:

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

• 作用:

  标签选择器可以把某一类标签全部选择出来

• 优点:

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

• 缺点:

  不能设计差异化样式

总结口诀:

​ 标签选择器,

​ 页面同选起,

​ 直接写标签,

​ 全部不放弃。

2.2 类选择器

类选择器使用"." (英文点号)进行标识,后面紧跟类名

• 语法:

  • 类名选择器

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

  • 标签

• 优点:

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

• 注意:

  • 类选择器使用"."进行标识,后面紧跟类名(自定义)
  • 长名称或词组可以使用中横线来为选择器命名
  • 不要纯数字、中文等命名,尽量使用英文字母来表示

  命名时约定俗称的,但是没有规定必须用这些常用的命名

  记忆口诀

  差异化选择
  一个或多个
  上面点定义
  类名别写错
  谁用谁调用
  class来做。

  嘿嘿，工作类最多。

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

  • 多个类名中间用空格隔开
  • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的

2.3 id选择器

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

• 语法:

  • id选择器

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

  • 标签

• 元素的id值是唯一的,只能对应于文档中某一个具体的元素

• 用法基本和类选择器相同

• id选择器和类选择器区别:

  • W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
    • 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
    • id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

• id选择器和类选择器最大的不同在于使用次数上

  • 类选择器我们在修改样式中用的最多
  • id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用

2.4 通配符选择器

• 概念:

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

• 语法:

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

  如下代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距

  * {
      margin: 0;
      padding: 0;
  }
  

• 注意:

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

2.5 基础选择器总结

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

2.6 团队约定

选择器

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

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用

3. 复合选择器

3.1 后代选择器

• 概念:

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

• 作用:

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

• 其写法就是把外层标签写在前面,内层标签写在后面, 中间用空格分隔,先写父亲爷爷,再写儿子孙子。

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

• 语法:

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

  • 当标签发生嵌套时,内层标签成为外层标签的后代
  • 子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签

3.2 子元素选择器

• 作用:

  子元素选择器只能选择作为某元素的子元素(亲儿子/父标签最近的子标签)的元素

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

• 语法:

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

• 重点:

  这里的子指的是亲儿子,不包括孙子或重孙子之类

  白话：

   比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。
  

3.3 交集选择器

• 条件:

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

jiaoji.png

• 语法:

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

  • 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special

• 记忆技巧:

  交集选择器是并且的意思, 即...又...的意思

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

  用的相对来说比较少,不太建议使用

3.4 并集选择器

• 应用:

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

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

• 语法:

  .class, h3 { color: red; font-size: 25px; }
  

• 任何形式的选择器(包括标签选择器、class类选择器以及id选择器),都可以作为并集选择器的一部分

• 记忆技巧:

  并集选择器通常用于集体声明,逗号隔开,所有选择器都会执行后面样式,逗号可以理解为和的意思

  比如 .one, p, #test {color: #F00;}
  表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色
  通常用于集体声明
  

3.5 链接伪类选择器

• 与类选择器的区别:

  为了和我们刚才学的类选择器相区别,类选择器是一个点比如.demo {}, 而我们的伪类用冒号(比如: :link{})

• 作用:

  • 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素
  • 因为伪类选择器很多,比如链接伪类,结构伪类等等

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

注意:

1.写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序,否则可能引起错误

2.记忆法:

• love hate 爱上了讨厌
• lv 包包 非常hao

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

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

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

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

3.6 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

4. 属性选择器

4.1 属性选择器列表

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

属性选择器代码演示:

button {
    cursor: pointer;
}
/* E[att] */
button[disabled] {
    cursor: default;
}
/* E[att="val"] */
input[type="text"] {
    color: red;
}
/* E[att^="val"] */
span[class^="icon"] {
    color: pink
}
/* E[att$="val"] */
span[class$="icon"] {
    color: purple;
}
/* E[att*="val"] */
span[class*="icon"] {
    color: blue;
}

5.结构伪类选择器

5.1 属性列表

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个元素
E:last-of-type	指定类型E的最后一个元素
E:nth-of-type(n)	指定类型E的第n个元素

• nth-child参数详解:

  • 注意: 本质上就是选中第几个子元素

  • n可以是数字、关键字、公式

  • n如果是数字,就是选中第几个

  • 常见的关键字: even 偶数、odd奇数

  • 常见的公式如下(如果n是公式,则从0开始计算)

  • 但是第0个元素或者超出了元素的个数则会被忽略

    公式	取值
    2n	偶数
    2n + 1	奇数
    5n	5 10 15 ...
    n + 5	从第5个开始(包含第五个)到最后
    -n + 5	前5个(包含第5个)

• nth-child 和 nth-of-type的区别

  • nth-child 选择父元素里面的第几个子元素,不管当前子元素的类型
  • nth-of-type 选择指定类型的元素

5.2 代码演示

ul li:first-child {
    background-color: blue;
}
ul li:last-child {
    background-color: green;
}
ul li:nth-child(3) {
    background-color: purple;
}
/* 偶数 */
ul li:nth-child(even) {
    background-color: blue;
}
/* 奇数 */
ul li:nth-child(odd) {
    background: #0094ff;
}
/* n是公式, 从0开始计算 */
/* 2n偶数 */
ul li:nth-child(2n) {
    background: #fff;
}
div :nth-child(1) {
    background: lightblue;
}
div span:nth-of-type(2) {
    background-color: lightseagreen;
}

6.伪类选择器

6.1 伪类选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

6.2 伪类选择器注意事项

• before 和 after 必须有content属性
• before在内容前面,after在内容后面
• before 和 after创建的是一个元素,但是属于行内元素
• 创建出来的元素在Dom中查找不到,所以称为伪元素
• 伪元素和标签选择器一样,权重为1

6.3 代码演示

dic {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;
}
div::before,
div::after {
    width: 20px;
    height: 50px;
    text-align: center;
    content: "哈哈";
}