css 伪类选择器scss用法

CSS伪类和伪元素实现特殊效果和选择特定元素CSS是一种用于网页样式设计的标记语言，它可以为网页添加各种特殊效果和样式。

在CSS中，伪类和伪元素是两种非常重要的概念，它们可以帮助我们实现特定的效果和选择特定的元素。

本文将介绍CSS中的伪类和伪元素，并以实例展示它们的使用方法。

一、伪类伪类是用于选择HTML元素的特定状态或行为的选择器。

它们通常在选择器后面以冒号(:)开头。

以下是一些常用的伪类及其使用示例：1. :hover:hover伪类用于当鼠标悬停在元素上时改变元素的样式。

例如，下面的CSS代码将使鼠标悬停在链接上时，链接文字变为红色：a:hover {color: red;}2. :active:active伪类用于当鼠标点击元素时改变元素的样式。

例如，下面的CSS代码将使鼠标点击按钮时按钮的背景色变为绿色：button:active {background-color: green;}3. :visited:visited伪类用于选择已经访问过的链接。

例如，下面的CSS代码将已经访问过的链接的颜色设为灰色：a:visited {color: gray;}二、伪元素伪元素是用于在元素的内容前面或后面插入特定内容的选择器。

它们通常在选择器后面以双冒号(::)开头。

以下是一些常用的伪元素及其使用示例：1. ::before::before伪元素用于在元素内容前面插入内容。

例如，下面的CSS 代码将在每个段落前面插入一个带有序号的标签：p::before {content: "编号：";}2. ::after::after伪元素用于在元素内容后面插入内容。

例如，下面的CSS代码将在每个链接后面插入一个箭头图标：content: "→";}3. ::first-letter::first-letter伪元素用于选中元素内容的第一个字母。

例如，下面的CSS代码将首字母大写：p::first-letter {text-transform: uppercase;}三、综合应用伪类和伪元素可以结合使用，实现更加复杂的效果。

CSS中的伪类选择器的应用场景CSS（层叠样式表）是一种用于定义网页的样式的语言，它可以用来控制网页中的布局、字体、颜色和其它视觉效果。

伪类选择器是CSS中一种特殊的选择器，用于选择元素在特定状态下的样式。

在本文中，将介绍CSS中的伪类选择器的应用场景。

一、 :hover伪类选择器:hover伪类选择器用于指定当鼠标悬停在一个元素上时的样式。

它常用于创建交互效果，使用户在鼠标悬停时感知到元素的变化。

例如，可以将链接的颜色在:hover时改变，以增强用户对链接的可点击性的感知。

二、 :active伪类选择器:active伪类选择器用于指定当元素被激活（被点击）时的样式。

它常用于创建点击效果，使用户在点击某个元素时得到即时的反馈。

例如，可以在按钮上使用:active伪类选择器来表现按钮被按下的效果。

三、 :focus伪类选择器:focus伪类选择器用于指定当元素获得焦点时的样式。

它常用于表单元素，使用户在输入时能够清楚地知道当前处于焦点状态的元素。

例如，可以在输入框上使用:focus伪类选择器来改变输入框的边框颜色，以显示当前获得焦点的输入框。

四、 :nth-child伪类选择器:nth-child伪类选择器用于选择某个元素在其父元素中的特定位置的样式。

它常用于创建具有规律性的样式，例如，可以使用:nth-child(odd)来选择所有奇数位置的元素。

这个选择器也可以与其他选择器组合使用，实现更灵活的选择。

例如，可以使用:nth-child(even)配合其他选择器选择所有偶数位置且满足特定条件的元素。

五、 :not伪类选择器:not伪类选择器用于选择不满足指定条件的元素。

它常用于取反选择，排除某些元素。

例如，可以使用:not(:first-child)来选择除了第一个子元素之外的所有子元素。

六、 :checked伪类选择器:checked伪类选择器用于选择已选中的input元素。

它常用于创建与选中状态相关的样式效果。

scss的基本⽤法⼀、使⽤变量 sass 让⼈们受益的⼀个重要特性就是为 CSS 引⼊了变量。

你可以把反复使⽤的 CSS 属性值定义成变量，然后通过变量名来引⽤它们，⽽⽆需重复书写这⼀属性值。

或者，对于仅使⽤过⼀次的属性值，你可以赋予其⼀个易懂的变量名，让⼈⼀眼就知道这个属性值的⽤途。

sass 使⽤ $ 符号来标识变量（⽼版本是⽤的！），⽐如 $color-base 和 $nav-width。

为什么选择 $ 符号呢？因为它好认、更具美感，且在 CSS 中并⽆他⽤，不会导致与现存或未来的 CSS 语法冲突。

1. 变量声明 sass 变量的声明和 css 属性的声明很像： 这意味着变量 $color-base 的值是 #00c16f，任何可以⽤作 CSS 属性值的赋值都可以⽤作 sass 的变量值，甚⾄是以空格分割的多个属性值： 或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。

这时变量还没有⽣效，除⾮你引⽤这个变量。

2.变量引⽤ 凡是 CSS 属性的标准值（⽐如说1px或者bold）可存在的地⽅，变量就可以使⽤。

CSS ⽣成时，变量会被它们的值所替代。

如果你需要⼀个不同的值，只需要改变这个变量的值，则所有引⽤此变量的地⽅⽣成的值都会随之改变。

HTML结构 浏览器显⽰效果 看上边⽰例中的 $color-border 变量，它被直接赋值给 .bbb 的 border 属性，当这段代码被编译输出 CSS 时，$color-border 会被red 这⼀颜⾊值所替代。

产⽣的效果就是 .bbb ⼀条1像素宽、实⼼且颜⾊值为 red 的边框。

也可以在 $border-base 变量的声明中使⽤ $color-border 这个变量，产⽣的效果就跟你直接为 border 属性设置了⼀个 1px solid $color-border 的值是⼀样的。

伪类选择器语法伪类选择器是CSS中一种特殊的选择器，它可以选择特定状态的元素，例如鼠标悬停、特定子元素、特定兄弟元素等。

伪类选择器的语法如下：1. 通用伪类选择器：`:root`选择根元素，通常是HTML元素。

2. 动态伪类选择器：`:hover`、`:active`、`:focus`、`:visited``:hover`：选择鼠标指针悬停时的元素。

`:active`：选择被用户激活的元素，例如被点击的按钮。

`:focus`：选择当前获得焦点的元素。

`:visited`：选择用户已访问的链接。

3. 子元素伪类选择器：`:first-child`、`:last-child`、`:nth-child(n)``:first-child`：选择每个父元素的第一个子元素。

`:last-child`：选择每个父元素的最后一个子元素。

`:nth-child(n)`：选择每个父元素的第n个子元素。

4. 兄弟伪类选择器：`:first-of-type`、`:last-of-type`、`:nth-of-type(n)``:first-of-type`：选择每个父元素的第一个相同类型的子元素。

`:last-of-type`：选择每个父元素的最后一个相同类型的子元素。

`:nth-of-type(n)`：选择每个父元素的第n个相同类型的子元素。

5. 否定伪类选择器：`:not(selector)`选择不匹配给定选择器的元素。

6. 目标伪类选择器：`:target`选择当前活动的目标元素，通常是URL中的锚点链接指向的元素。

7. 状态伪类选择器：`:enabled`、`:disabled`、`:checked``:enabled`：选择启用的表单元素。

`:disabled`：选择禁用的表单元素。

`:checked`：选择被选中的复选框或单选框。

css伪选择器使⽤总结——css中关于伪类和伪元素的知识总汇CSS 伪类⽤于向某些选择器添加特殊的效果，⽽CSS引⼊伪类和伪元素的概念是为了实现基于⽂档树之外的信息的格式化。

这⾥讲总结关于css伪类和伪元素的相关使⽤伪元素:before/:before 在某个元素之前插⼊⼀些内容；::after/:after 在某个元素之后插⼊⼀些内容；::first-letter/:first-letter 为某个元素中的⽂字的⾸字母或第⼀个字使⽤样式；::first-line/:first-line 为某个元素的第⼀⾏⽂字使⽤样式；::selection 匹配⽤户被⽤户选中或者处于⾼亮状态的部分；::placeholder 匹配占位符的⽂本，只有元素设置了placeholder属性时，该伪元素才能⽣效；::backdrop(处于试验阶段) ⽤于改变全屏模式下的背景颜⾊，全屏模式的默认颜⾊为⿊⾊。

该伪元素只⽀持双冒号的形式；伪类（1）表⽰状态：:link 选择未访问的链接；:visited　选择已访问的链接；:hover 选择⿏标指针移⼊链接；:active 被激活的链接，即按下单击⿏标左键但未松开；:focus 选择获取焦点的输⼊字段；（2）结构化伪类：:not 否定伪类，⽤于匹配不符合参数选择器的元素；:first-child 匹配元素的第⼀个⼦元素；:last-child 匹配元素的最后⼀个⼦元素；first-of-type　匹配属于其⽗元素的⾸个特定类型的⼦元素的每个元素；:last-of-type　匹配元素的最后⼀个⼦元素；:nth-child :nth-child根据元素的位置匹配⼀个或者多个元素，它接受⼀个an+b形式的参数（an+b最⼤数为匹配元素的个数）；:nth-last-child :nth-last-child与:nth-child相似，不同之处在于它是从最后⼀个⼦元素开始计数的；:nth-of-type :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素；:nth-last-type :nth-last-of-type与nth-of-type相似，不同之处在于它是从最后⼀个⼦元素开始计数的；:only-child 当元素是其⽗元素中唯⼀⼀个⼦元素时，:only-child匹配该元素；:only-of-type 当元素是其⽗元素中唯⼀⼀个特定类型的⼦元素时，:only-child匹配该元素；:target 当URL带有锚名称，指向⽂档内某个具体的元素时，:target匹配该元素；（3）表单相关伪类：:checked 匹配被选中的input元素，这个input元素包括radio和checkbox；:default 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮；:disabled　匹配禁⽤的表单元素；:empty 匹配没有⼦元素的元素。

CSS与SCSS的选择器总结选择器可以选择1. 类（或ID）、2. 标签、3. 类（或ID）与标签组合表⽰⽅式为：类标签IDHTML class="cla"<lab>id="num"CSS.cla lab#num注意：类与ID类似，下⾯的例⼦的类也可以换成ID⼀、CSS的选择器1、多（类）选择器（1）类或标签选择class=“cla1 cla2 cla3”的标签，改变【内容3】.cla1.cla2.cla3 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla1 cla2"> 内容2</div><div class="cla1 cla2 cla3"> 内容3</div>（2）标签与类的组合table.cla1.cla2 {width: 100%;}<table class="cla1 cla2"> 内容</table>2、群组选择器（1）类或标签选择含有cla1、cla2、cla3任⼀个class的标签，改变【内容1】、【内容2】、【内容3】.cla1, .cla2, .cla3 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla1 cla2"> 内容2</div><div class="cla1 cla2 cla3"> 内容3</div>（2）标签与类的组合table, .cla1, .cla2 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla2"> 内容2</div><table> 内容3</table>3、相邻选择器（1）类或标签选择cla1后⾯紧接的cla2（同⼀⽗级），改变【内容2】.cla1 + .cla2 {width: 100%;}<div class="cla0"><div class="cla1"> 内容1 </div><div class="cla2"> 内容2 </div></div>（2）标签与类的组合h1 + cla1 {width: 100%;}<div class="cla0"><h1> 内容1 </h1><div class="cla1"> 内容2 </div></div>4、⼦代(类)选择器（1）类或标签选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】.cla1>.cla2>.cla3 {width: 100%;}<div class="cla1"><div class="cla2"><div class="cla3"> 内容1 <div class="cla3"> 内容2</div></div></div></div>（2）标签与类的组合table>.cla1>td {width: 100%}<table><div class="cla1"><td> 内容 </td></div></table>5、后代(类)选择器（1）类或标签选择 cla1后代⾥⾯的全部cla3标签（不管后代嵌套得有多深），改变【内容1】、【内容2】.cla1 .cla3 {width: 100%;}<div class="cla1"><div class="cla2"><div class="cla3"> 内容1<div class="cla3"> 内容2</div></div></div></div>（2）标签与类的组合.cla1 h1 {width: 100%;}<div class="cla1"><td><h1> 内容 </h1></td></div>6、伪类选择器伪类必须配合正常的类来使⽤，改变未访问的链接【内容】a:link {color: #fff}<a> 内容</a>⼆、SCSS的选择器1、多（类）选择器.cla1 {&.cla2.cla3 {width: 100%;}}.cla1.cla2.cla3 {width: 100%;}2、群组选择器.cla1 {&, .cla2, .cla3 {width: 100%;}}.cla1, .cla2, .cla3 {width: 100%;}3、相邻选择器.cla1 {& + .cla2 {width: 100%;}}.cla1 + .cla2 {width: 100%;}4、⼦代（类）选择器.cla1 {>.cla2>.cla3 {width: 100%;}}//或者是从⼦类写到⽗类（根据⾃⼰实际需要）.cla2 {.cla1>&>.cla3 {width: 100%;}}.cla1>.cla2>.cla3 {width: 100%;}5、后代（类）选择器.cla1 {.cla3 {width: 100%;}}//或者是从⼦类写到⽗类（根据⾃⼰实际需要）.cla3 {.cla1 & {width: 100%;}}.cla1 .cla3 {width: 100%;}6、伪类选择器a {&:link {color: #ffffff;}}a:link {color: #ffffff;}7、⾃定义类（BEM）的选择//以前的⽤法.cla {@at-root #{&}1 {width: 100%;}@at-root #{&}2 {width: 100%;}}//新⽀持的⽤法（后⾯最好不要跟【标签】或【属性】名）.cla {&1 {width: 100%;}&2 {width: 100%;}}.cla1 {width: 100%;}.cla2 {width: 100%;}8、属性的选择.cla1 {border: {width: 1px;style: soild;color: #ffffff;}}.cla1 {border-width: 1px;border-style: soild;border-color: #ffffff;}。

CSS-弹性布局-伪类选择器-复杂选择器1.定位1.堆叠顺序⼀旦将元素变为已定位元素的话，元素们则有可能出现堆叠的效果。

如何改变堆叠顺序？属性：z-index取值：⽆单位的数字，数字越⼤越靠上。

注意：1.⽗⼦元素间，z-index⽆效，永远都是⼦元素压在⽗元素上。

2.只有已定位元素才能使⽤z-index属性。

2.固定定位1.什么是固定定位将元素固定在页⾯中的某个位置，位置不会随着滚动条⽽发⽣改变，始终固定在可视化区域。

2.语法position:fixed;配合偏移属性使⽤3.特点1.固定定位的元素会变成块级元素2.脱离⽂档流，不占页⾯空间3.固定定位的元素永远都是相对于body去实现位置的初始化。

练习：在⽹页的右下⾓固定⼀张图⽚，距离底部100px,距离右边50px,页⾯滚动时，图⽚不动。

=======================CSS3⾼级1.复杂选择器1.兄弟选择器兄弟元素：具备相同⽗元素的平级元素称之为兄弟元素。

ex:<div><p></p><p></p><p></p><p></p></div>1.相邻兄弟选择器作⽤：获取紧紧挨在某元素后的兄弟元素语法：选择器1+选择器2{}2.通⽤兄弟选择器作⽤：获取某元素后所有满⾜条件的兄弟元素语法：选择器1~选择器2{}练习：通过兄弟选择器设置以下样式1.h3与div之间有30px的外边距；2.从第⼆个div开始，每个div都有10px的上外边距。

<h3>静夜思</h3><div>窗前明⽉光</div><div>疑是地上霜</div><div>举头望明⽉</div><div>低头思故乡</div>2.属性选择器1.作⽤允许通过元素的属性及其值匹配页⾯中的元素。

css伪类得用法CSS伪类是一种特殊的CSS选择器，它允许我们根据元素的状态或位置来应用样式。

伪类选择器通常以一个冒号（:）和一个表示状态或位置的单词组成。

本文将详细介绍CSS伪类的用法。

一、常用伪类1. :hover:hover 伪类表示鼠标悬停在元素上时的状态。

例如，我们可以使用:hover 伪类来改变按钮在鼠标悬停时的背景颜色：```cssbutton {background-color: blue;}button:hover {background-color: red;}```2. :active:active 伪类表示元素当前被激活（如鼠标按下）的状态。

例如，我们可以使用:active 伪类来改变按钮在被点击时的背景颜色：```cssbutton {background-color: blue;button:active {background-color: red;}```3. :focus:focus 伪类表示元素当前获得焦点（如光标置于其上）的状态。

例如，我们可以使用:focus 伪类来改变输入框在获得焦点时的背景颜色：```cssinput[type="text"] {background-color: blue;}input[type="text"]:focus {background-color: red;}```4. :first-child, :last-child, :nth-child(n)这些伪类表示元素在同级元素中的位置。

例如，我们可以使用:first-child 伪类来改变列表项中第一个列表的样式：```cssul > li:first-child {color: red;```5. :checked:checked 伪类表示复选框或单选按钮当前被选中。

例如，我们可以使用:checked 伪类来改变复选框在选中时的背景颜色：```cssinput[type="checkbox"] {background-color: blue;}input[type="checkbox"]:checked {background-color: red;}```6. :disabled, :enabled:disabled 和:enabled 伪类表示元素的禁用或启用状态。

CSS中的伪元素和伪类的嵌套使用技巧伪元素和伪类是CSS中非常强大且重要的概念。

它们允许我们通过选择器来为元素的特定部分添加样式或行为，从而实现更精确的控制和设计。

在本文中，我们将重点讨论伪元素和伪类的嵌套使用技巧，以及如何在实际开发中应用它们。

一、伪元素的嵌套使用伪元素是CSS中用于向文档中的元素添加额外内容的特殊选择器。

通过伪元素，我们可以在元素的前后或内部插入一些非结构化的内容，比如添加箭头、图标等。

下面是一些常见的伪元素及其用法：1. ::before::before伪元素会在目标元素前插入一个内容。

我们可以通过设置content属性来定义插入的内容，并可以对该伪元素添加样式。

例如，通过设置::before伪元素的content为引号，可以实现在文本前面添加引号的效果。

2. ::after::after伪元素与::before伪元素类似，也是在目标元素之后插入内容。

我们同样可以通过设置content属性来定义插入的内容，并可以对其添加样式。

例如，我们可以使用::after伪元素为按钮添加一个小箭头，来提示用户该按钮可以进行下一步操作。

3. ::first-letter::first-letter伪元素用于对文本的首字母进行特殊样式设置。

通过对::first-letter应用样式，我们可以实现首字母大写、首字母字体加粗等效果。

这在章节标题或段落开头的第一个字母上使用效果明显。

4. ::first-line::first-line伪元素用于对文本的第一行应用特殊样式。

我们可以设置::first-line的样式来为段落的首行添加背景色、颜色等效果，从而提升文章的可读性。

二、伪类的嵌套使用伪类是CSS中用于选择元素特定状态或位置的选择器。

通过伪类，我们可以根据元素的状态或位置来应用不同的样式，实现更灵活的效果。

以下是几个常见的伪类及其用法：1. :hover:hover伪类用于在用户悬停在元素上时应用样式。

scss的用法SCSS（Sassy CSS）是CSS预处理器，可以在CSS的基础上增加一些编程语言的特性，如变量、循环、函数等，简化CSS的编写，提高开发效率。

下面我们将介绍SCSS的用法，包括变量、嵌套规则、函数、混合器等。

一、变量在SCSS中，可以使用变量来存储一些重复使用的值，如颜色、字体等。

使用变量可以简化CSS的编写，方便修改和维护。

定义一个变量使用$符号，例如：$primary-color: #007bff;这样，我们就定义了一个名为primary-color的变量，并将其值设置为#007bff。

接下来可以在样式规则中使用这个变量，例如：a {color: $primary-color;&:hover {color: darken($primary-color, 20%);}}这里，我们使用$primary-color变量来设置链接的颜色，并在:hover伪类中使用darken函数来使颜色变暗。

这里的darken是SCSS中的函数，可以通过这个函数来改变颜色的亮度。

二、嵌套规则在SCSS中，可以使用嵌套规则来简化CSS的编写。

在下面的样式规则中，我们将a标签和h1标签的样式嵌套在div中：div {a {color: $primary-color;&:hover {color: darken($primary-color, 20%);}}h1 {font-size: 24px;font-weight: bold;}}这样做可以减少CSS代码的冗余，提高代码的可读性。

三、函数SCSS中内置了很多有用的函数，可以用来处理颜色、字符串、数值等。

这里介绍一些常用的函数：1. lighten($color, $amount)：将颜色变亮。

$color参数表示颜色值，$amount参数表示亮度增加的值，范围为0%-100%。

2. darken($color, $amount)：将颜色变暗。