526互联

CSS04.选择器

发布时间 2023-03-24 19:10:15作者: u_Dawn

选择器

选择器作用：帮助你精准的选中想要的元素\找到特定的HTML页面元素

1.简单选择器

1.1 ID选择器（JavaScript使用）（不推荐使用）

选中的是对应id值的元素

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

  • 其基本语法格式如下：

    • id选择器

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

    • 标签

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

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

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

id选择器和类选择器区别

  • W3C标准规定，在同一个页面内，不允许有相同的id对象出现，但是允许相同名字的class。

    • 类选择器（class）好比人的名字，是可以多次重复使用的，比如 张伟 张三 李四 李伟

    • id选择器 好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

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

总结：

  • 类选择器我们在修改样式中，用的最多。

  • id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的JavaScript搭配使用。

例：

#test {
       color: coral;
    }
​
<p id="test">
    Lorem ipsum dolor sit amet.
</p>

 

1.2元素（标签）选择器（较多使用）

  • 概念：

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

  • 语法：

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

  • 作用：

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

例：

p {
  color: blue;
  }

和p有关的元素都被选中

  • 优点：

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

  • 缺点：

    不能设计差异化样式

 

类选择器特殊用法-多类名

我们可以给标签指定多个类名，中间用空格隔开，从而达到更多的选择目的。

例：

    <span class="blue font100">G</span>

 

1.3类选择器（非常多使用）

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

  • 语法：

    • 类名选择器

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

    • 标签

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

  • 优点：

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

  • 注意：

    • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名.（自定义，我们自己命名的 ）

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

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

 

只要是class类名后面的都会被选中，想删掉时就直接去掉元素中的类名即可 class后面可以应用多个类选择器，用空格隔开即可

 

1.4通配符选择器（不推荐使用）

*，选中所有元素都为相同样式（test1）

  • 概念

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

  • 其基本语法如下：

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

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

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

  • 注意：

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

注：

  • 不使用无具体语义定义的标签选择器div 、span

 

1.5 属性选择器(少用)

根据属性名和属性值选中元素（test2）

1.6 伪元素选择器（用法看test4）

before

after

2.CSS复合选择器

  1. 并且（不加任何元素直接写到一起）（test5）

  2. 后代选择器：后代元素 —— 空格（用的最多）（可以精准的选择我们想要的元素）（test6）

  3. 子元素选择器：子元素 —— > (把后代元素的空格改成">",只能选中子元素不能选子元素的子元素)（test7）

  4. 相邻兄弟元素 —— + (test8)

  5. （后面出现的所有兄弟元素）兄弟元素 —— ~ (test9)

 

2.1 后代选择器（重点）

  • 概念：

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

  • 作用：

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

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

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

  • 语法：

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

  • 当标签发生嵌套时，内层标签就成为外层标签的后代。

  • 子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

 

2.2 子代（元素）选择器

  • 作用：

    子元素选择器只能选择作为某元素子元素（亲儿子）的元素（只选亲儿子）

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

  • 语法：

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

这里的子指的是亲儿子 不包含孙子重孙子之类。

 

2.3 交集选择器

  • 语法

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

  • 记忆技巧：

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

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

用的比较少，不太建议使用

 

2.4 并集选择器（重点）

  • 应用：

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

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

  • 语法：

 

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

  • 记忆技巧：

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

 

p,
span,
.div {
    color: red;
}

 

2.5 链接伪类选择器(重点)(多用)

  • 伪类选择器:

类选择器是一个点 比如.demo{}

而我们的伪类 用 2个点 就是 冒号 比如:link{}

  • 作用：

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

    • 因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器

 

选中某些元素的某种状态（test3）(要写的话要按照下面的顺序)

1）a:link：超链接未访问时的状态

2）a:visited：超链接访问过的状态

3）a:hover：鼠标悬停状态

4）a:active：激活状态，鼠标按下状态

 

3.复合选择器总结

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