全栈工程师-前端开发-CSS3_选择器与伪类.docxVIP

PAGE1

PAGE1

CSS3选择器基础

1基本选择器的使用

在CSS3中，基本选择器是构建复杂样式的基础。它们包括类型选择器、ID选择器、类选择器和通用选择器。

1.1类型选择器

类型选择器用于选择HTML文档中的特定元素类型。例如，p选择器将选择所有p标签。

/*选择所有段落元素*/

p{

color:blue;

}

1.2ID选择器

ID选择器用于选择具有特定ID的元素。ID在HTML文档中应该是唯一的，因此ID选择器可以精确地定位到一个元素。

/*选择ID为myId的元素*/

#myId{

font-size:20px;

}

1.3类选择器

类选择器用于选择具有特定类的元素。与ID不同，类可以在多个元素中重复使用。

/*选择所有类为myClass的元素*/

.myClass{

background-color:yellow;

}

1.4通用选择器

通用选择器*用于选择文档中的所有元素。

/*选择文档中的所有元素*/

*{

margin:0;

padding:0;

}

2组合选择器详解

组合选择器允许你组合不同类型的选择器，以更精确地定位元素。

2.1后代选择器

后代选择器用于选择某个元素的后代元素。例如，divp将选择所有位于div元素内部的p元素。

/*选择所有位于div内部的p元素*/

divp{

color:red;

}

2.2子选择器

子选择器（）用于选择某个元素的直接子元素。

/*选择div的直接子元素p*/

divp{

color:green;

}

2.3相邻兄弟选择器

相邻兄弟选择器（+）用于选择紧接在另一个元素后的元素，且两个元素有相同的父元素。

/*选择紧接在h1后的p元素*/

h1+p{

font-weight:bold;

}

2.4通用兄弟选择器

通用兄弟选择器（~）用于选择与另一个元素有相同父元素的元素。

/*选择与h1有相同父元素的所有p元素*/

h1~p{

text-align:center;

}

3属性选择器与伪类选择器的区别与联系

3.1属性选择器

属性选择器用于选择具有特定属性的元素。例如，[type=text]将选择所有type属性值为text的元素。

/*选择所有type属性值为text的input元素*/

input[type=text]{

border:1pxsolidblack;

}

3.2伪类选择器

伪类选择器用于选择元素的特定状态，如:hover、:active、:first-child等。

/*当鼠标悬停在a元素上时，改变其颜色*/

a:hover{

color:purple;

}

/*选择所有div元素的第一个子元素*/

div:first-child{

font-size:18px;

}

3.3联系与区别

属性选择器和伪类选择器都可以增强CSS的选择能力，但它们的使用场景不同。属性选择器基于元素的属性值进行选择，而伪类选择器基于元素的状态进行选择。属性选择器可以用于更精确地定位元素，而伪类选择器则用于响应用户交互或元素的特定位置。

例如，结合使用属性选择器和伪类选择器，可以为具有特定属性的元素在特定状态时应用样式。

/*当鼠标悬停在具有data-type属性的a元素上时，改变其颜色*/

a[data-type]:hover{

color:orange;

}

通过上述示例，我们可以看到CSS3选择器的灵活性和强大功能，它们允许我们以更复杂和精确的方式选择和样式化HTML元素。#CSS3伪类与伪元素

4伪类的概念与应用

4.1原理

伪类是CSS中的一种特殊选择器，用于表示元素的某种状态，而这种状态通常是由用户操作或元素的内在属性触发的。伪类并不对应于文档中的任何实际元素，而是用于添加或修改元素在特定情况下的样式。它们以冒号（:）开头，紧随在元素选择器或另一个伪类之后。

4.2内容

伪类可以用于多种场景，如：-表示链接的不同状态（:link,:visited,:hover,:active）-选择用户界面元素的状态（:checked,:enabled,:disabled）-选择文档中的特定元素（:first-child,:last-child,:nth-child(n)）

4.2.1示例：链接状态伪类

/*未访问的链接*/

a:link{

color:blue;

text-decoration:none;

}

/*已访问的链接*/

a:visited{

color:purple;

}

/