前端基础

2024-07-06 15:46| 来源: 网络整理| 查看: 265

一、基本选择器二、后代选择器、子元素选择器三、兄弟选择器四、交集选择器与并集选择器五、序列选择器六、属性选择器七、伪类选择器八、伪元素选择器九、 CSS三大特性一、基本选择器

1、id选择器

#1、作用：根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性 #2、格式 id名称 { 属性：值; } #3、注意点： 1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复 3、引用id一定要加# 4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等

DOCTYPE html> id选择器 #p1 { color: red; } #p2 { color: green; } #p3 { color: blue; } 大多数人的帅，都是浮在表面的，是外表的帅而多多，不仅具备外表帅，内心更是帅了一逼多多就是我，我就是多多 id选择器实例

2、类选择器

#1、作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性 #2、格式： .类名称 { 属性：值; } #3、注意点： 1、类名就是专门用来给某个特定的标签设置样式的 2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复 3、引用class一定要加点. 4、类名的命名规则与id的命名规则相同

DOCTYPE html> 类选择器 .p1 { color: red; } .p2 { color: green; } .p3 { color: blue; } 大多数人的帅，都是浮在表面的，是外表的帅而多多，不仅具备外表帅，内心更是帅了一逼多多就是我，我就是多多类选择器实例

3、标签选择器

#1、作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性 #2、格式：标签名称 { 属性：值; } #3、注意点： 1、只要是HTML的标签都能当做标签选择器 2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签 3、标签选择器，无论嵌套多少层都能选中

DOCTYPE html> 标签选择器 p { color: red; } 多多美丽的外表下其实隐藏着一颗骚动的心这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕标签选择器

4、通配符选择器

#1、作用：选择所有标签 #2、格式： * { 属性：值； } #3、注意点： 1、在企业开发中一般不会使用通配符选择器理由是：由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签如果当前界面上的标签比较多，那么性能就会比较差

DOCTYPE html> 通配符选择器 * { color: red; } 我是标题我是段落我是超链接通配选择器实例二、后代选择器、子元素选择器

1、后代选择器

#1、作用：找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性 #2、格式：标签名1 xxx { 属性：值; } #3、注意： 1、后代选择器必须用空格隔开 2、后代不仅仅是儿子，也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去

后代选择器 div p { color: red; } #id1 li p { font-size: 50px; } div ul li a { font-size: 100px; color: green; }

我是body下的段落1

我是div下的段落1

我是div下的段落2

我是ul>li下的段落1

我是ul>li下的段落

点我啊1 点我啊2

我是body下的段落2

后代选择器实例

2、子元素选择器

#1、作用：找到制定标签的所有特定的直接子元素，然后设置属性 #2、格式：标签名1>标签名2 { 属性：值; } 先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素 #3、注意： 1、子元素选择器之间需要用>符号链接，并且不能有空格比如div >p会找div标签的所有后代标签，标签名为">p" 2、子元素选择器只会查找儿子，不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去

后代选择器 body>p { color: green; } div>p { color: red; } .aaa>a { font-size: 100px; } div>ul>li>.ddd { color: blue; }

我是body下的段落1

我是div下的段落1

我是div下的段落2

我是ul>li下的段落1

我是ul>li下的段落2

点我啊1 点我啊2

我是body下的段落2

子元素选择器三、兄弟选择器

1、相邻兄弟选择器，CSS2推出

#1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性 #2、格式选择器1+选择器2 { 属性：值; } #3、注意点： 1、相邻兄弟选择器必须通过+号链接 2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签

DOCTYPE html> 兄弟选择器 h1+p { font-size: 50px; } /* 相邻兄弟解释器*/ 我是标题1 我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是标题2 我是段落相邻兄弟解释器演示

2、通用兄弟选择器，CSS3推出

#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性 #2、格式：选择器1~选择器2 { 属性：值; } #3、注意点： 1、通用兄弟选择器必须用~来链接 2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签无论有没有被隔开，都可以被选中

DOCTYPE html> 通用兄弟选择器 h1~p { color: red; } /*通用兄弟选择器*/ 我是标题1 我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是标题2 我是段落通用兄弟解释器实例四、交集选择器与并集选择器

1、交集选择器

#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性 #2、格式：选择器1选择器2 { 属性：值; } #3、注意： 1、选择器与选择器之间没有任何链接符号 2、选择器可以使用标签名称、id、class 3、交集选择器在企业开发中并不多见，了解即可因为：p.part1 完全可以用.part1取代

DOCTYPE html> 后代选择器 p.part1 { color: red; } p#p1{ font-size: 100px; } 我是段落我是段落我是段落我是段落我是段落我是段落交集选择器实例

2、并集选择器

#1、作用：给所有满足条件的标签设置属性 #2、格式：选择器1,选择器2 { 属性：值; } #3、注意： 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class

DOCTYPE html> 并集选择器 .part1,h1,a { color: red; } 哈哈啊我是段落我是段落我是段落我是我我是段落我是段落我是段落并集选择器实例五、序列选择器 #1、作用： css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个 #2、格式 #2.1 同级别 :first-child p:first-child 同级别的第一个 :last-child p:last-child 同级别的最后一个 :nth-child(n) 同级别的第n个 :nth-last-child(n) 同级别的倒数第n个 #2.2 同级别同类型 :first-of-type 同级别同类型的第一个 :last-of-type 同级别同类型的最后一个 :nth-of-type(n) 同级别同类型的第n个 :nth-last-of-type(n) 同级别同类型的倒数第n个 #2.3 其他 :only-of-type 同类型的唯一一个 :only-child 同级别的唯一一个

#1、同级别的第一个 #1.1 示范一 p:first-child { color: red; } 代表：同级别的第一个，并且第一个要求是一个p标签我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 这样的话第一个p和div中的第一个p都变成红色， #1.2 示范二 p:first-child { color: red; } 代表：同级别的第一个，并且第一个要求是一个p标签 w我是标题我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p 注意点： :fist-child就是第一个孩子，不区分类型 #2、同级别的最后一个 p:last-child { color: red; } 代表：同级别的最后一个，并且最后一个要求是一个p标签我是标题我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 我是段落7 这样的话只有6跟7都变红 #3、同级别的第n个 p:nth-child(3) { color: red; } 代表：同级别的第3个，并且第3个要求是一个p标签我是标题我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6.1 我是段落6.2 我是标题我是段落7 这样的话只有“我是段落2”变红 #4、同级别的倒数第n个 p:nth-last-child(3) { color: red; } 代表：同级别的倒数第3个，并且第3个要求是一个p标签我是标题我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6.1 我是段落6.2 我是标题我是段落7 这样的话只有“我是段落6.1”和“我是段落5”被选中同级别示范

我是标题我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6.1 我是段落6.2 我是标题我是段落7 #1、同级别同类型的第一个 p:first-of-type { color: red; } “我是段落1”和“我是段落6.1”被选中 #2、同级别同类型的最后一个 p:last-of-type { color: red; } “我是段落7”和“我是段落6.2”被选中 #3、同级别同类型的第n个 p:nth-of-type(2) { color: red; } “我是段落2”和“我是段落6.2”被选中 #4、同级别同类型的倒数第n个 p:nth-last-of-type(2) { color: red; } “我是段落5”和“我是段落6.1”被选中同级别同类型实例

#1、同类型的唯一一个 p:only-of-type { color: red; } 我是标题我是段落6.1 我是段落6.2 我是标题我是段落7 “我是段落7“被选中 #2、同级别的唯一一个 p:only-child { color: red; } 我是标题我是段落6.1 我是段落7 “我是段落6.1”被选中其他情况六、属性选择器 #1、作用：根据指定的属性名称找到对应的标签，然后设置属性该选择器，最常用于input标签 #2、格式与具体用法： [属性名] 其他选择器[属性名] [属性名=值] [属性名^=值] [属性名$=值] [属性名*=值] 例1：找到所有包含id属性的标签 [id] 例2：找到所有包含id属性的p标签 p[id] 例3：找到所有class属性值为part1的p标签 p[class="part1"] 例4：找到所有href属性值以https开头的a标签 a[href^="https"] 例5：找到所有src属性值以png结果的img标签 img[src$="png"] 例6：找到所有class属性值中包含part2的标签 [class*="part"]

DOCTYPE html> 属性选择器 [id] { color: red; } p[id] { font-size: 30px; } p[class="part1"] { color: green; } a[href^="https"] { font-size: 50px; } img[src$="jpg"] { width: 300px; } [class*="part"] { text-decoration: line-through; } 哈哈啊我是段落我是段落我是段落我是我 http://www.baidu.com https://www.baidu.com 我是段落我是段落具体演示七、伪类选择器 #1、作用：常用的几种伪类选择器。 #1.1 没有访问的超链接a标签样式： a:link { color: blue; } #1.2 访问过的超链接a标签样式： a:visited { color: gray; } #1.3 鼠标悬浮在元素上应用样式： a:hover { background-color: #eee; } #1.4 鼠标点击瞬间的样式： a:active { color: green; } #1.5 input输入框获取焦点时样式： input:focus { outline: none; background-color: #eee; } #2 注意： 1 a标签的伪类选择器可以单独出现，也可以一起出现 2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效 link，visited，hover，active 3 hover是所有其他标签都可以使用的 4 focus只给input标签使用

DOCTYPE html> 伪类选择器 a:link { color: #cccccc; } a:visited { color: #55BBBB; } a:hover { color: green; } a:active { color: red; } input:hover { outline: none; background-color: #cccccc; } 点击我伪类选择器实例八、伪元素选择器 #1、常用的伪元素。 #1.1 first-letter：杂志类文章首字母样式调整例如： p:first-letter { font-size: 48px; } #1.2 before 用于在元素的内容前面插入新内容。例如： p:before { content: "*"; color: red; } 在所有p标签的内容前面加上一个红色的*。 #1.3 after 用于在元素的内容后面插入新内容。例如： p:after { content: "?"; color: red; } 在所有p标签的内容后面加上一个蓝色的?。

DOCTYPE html> 伪元素选择器 p:first-letter { font-size: 50px; } /*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/ a::after { content: "?"; color: red; } a:before { content: "！"; color: green; } 英雄不问出处，流氓不论岁数多多是干什么的多多是干什么的多多是干什么的伪元素演示九、 CSS三大特性

1、继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性 #2、注意： 1、只有以color、font-、text-、line-开头的属性才可以继承 2、a标签的文字颜色和下划线是不能继承别人的 3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大 ps:打开浏览器审查元素可以看到一些inherited from。。。的属性 #3、应用场景：通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

DOCTYPE html> 后代选择器 div { color: red; font-size: 50px; } 我是标题多多最帅导航1 导航2 导航2 aaaa bbbb 继承性演示

2、层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果 #2、注意： 1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性 ps：通过谷歌浏览器可以查看到，一些属性被划掉了

DOCTYPE html> 层叠性 p { color: red; } .ppp { color: green; } 我是段落层叠性演示

3、优先级

#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定 #2、优先级整体优先级从高到底：行内样式>嵌入样式>外部样式行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

1、大前提：直接选中 > 间接选中(即继承而来的)

#1、以下为直接选中 #id1 { color: red; } .ppp { color: green; } p { color: blue; } #2、以下为间接选中 ul { color: yellow; } 我是span 直接选中优先级间接选中示范

2、如果都是间接选中，那么谁离目标标签比较近，就听谁的

DOCTYPE html> 优先级 /*离目标近，显示的当然是red*/ li { color: red; } /*离目标远*/ ul { color: yellow; } 我是span 都是间接选中，谁离目标近谁优先示范

3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

DOCTYPE html> 优先级 p { color: red; } /*同样都是标签选择器，谁写在后面谁生效*/ p { color: yellow; } 我是span 同样都是标签选择器，谁写后面谁生效示范

4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠

id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

DOCTYPE html> 优先级 /*打开浏览器依次去掉优先级高的来进行验证*/ #id1 { color: red; } .ppp { color: green; } p { color: blue; } * { color: yellow; } li { color: #7e1487; } 我是span 演示

5、优先级之!important

#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。 #2、注意： 1、!important只能用于直接选中，不能用于间接选中 2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升 3、!important必须写在属性值分号的前面

DOCTYPE html> 优先级 /*打开浏览器依次去掉优先级高的来进行验证*/ #id1 { color: red; } .ppp { color: green; } p { color: blue; } * { color: yellow !important; } li { color: #7e1487; } 我是span 了解就行，不推荐用

6、优先级之权重计算

#1、强调如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级 #2、计算方式 #1、id数多的优先级高 #2、id数相同，则判定类数多的优先级高 #3、id数、class数均相同，则判定标签数多的优先级高 #4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高

DOCTYPE html> 优先级 #id1 #id2 #id3 .ppp{ color: red; } #id2 #id3.aaa p{ color: purple; } #id1.ccc>.bbb>.aaa>p { color: pink; } #id1 .aaa .ppp { color: green; } #id2 .aaa p { color: yellow; } div ul li p { color: blue; } div ul p { color: cyan; } 我是段落一个一个对比，演示

【本文地址】

前端基础

前端基础

今日新闻

推荐新闻