前端开发工程师-前端基础-CSS3_选择器与伪类.docx

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内的段落元素*/

divp{

color:red;

}

2.2子选择器

子选择器用于选择某个元素的直接子元素。与后代选择器不同，子选择器只选择直接的子元素。

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

divp{

color:green;

}

2.3相邻兄弟选择器

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

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

div+p{

color:orange;

}

2.4通用兄弟选择器

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

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

div~p{

color:purple;

}

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

3.1属性选择器

属性选择器用于选择具有特定属性的元素。这在处理具有特定数据属性或类的元素时非常有用。

/*选择所有具有data-type属性的元素*/

[data-type]{

border:1pxsolidblack;

}

/*选择所有data-type属性值为example的元素*/

[data-type=example]{

border-color:red;

}

3.2伪类选择器

伪类选择器用于选择元素的特定状态，如鼠标悬停、访问过的链接、第一个子元素等。

/*选择鼠标悬停的元素*/

a:hover{

color:blue;

}

/*选择访问过的链接*/

a:visited{

color:purple;

}

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

div:first-child{

font-weight:bold;

}

3.3联系

属性选择器和伪类选择器都可以与基本选择器和其他组合选择器一起使用，以创建更复杂的选择器。它们的联系在于，它们都是CSS3中用于更精确地定位和选择元素的工具。

/*选择所有data-type属性值为example且鼠标悬停的元素*/

[data-type=example]:hover{

border-color:blue;

background-color:yellow;

}

通过上述示例，我们可以看到属性选择器和伪类选择器如何协同工作，以更精确地控制样式。这在处理复杂的网页布局和交互时非常有用。#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