css基础知识（1）

黄赛馨

于 2021-06-03 18:04:22 发布

阅读量126

点赞数 2

本文链接：https://blog.csdn.net/m0_46691444/article/details/117529735

版权

CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

（一）简单选择器

1.根据名称、id、类来选取元素：

（1）css元素选择器：元素选择器根据元素名称来选择 HTML 元素。

（2）在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

2.css id选择器：

（1）id 选择器使用 HTML 元素的 id 属性来选择特定元素。

（2）元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

（3）要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

（4）实例：这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

注意：id 名称不能以数字开头。

（5）CSS 类选择器：

a.类选择器选择有特定 class 属性的 HTML 元素。

b.如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

c.实例：在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

d.在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

3.css通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。

实例：下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}

4.css分组选择器：分组选择器选取所有具有相同样式定义的 HTML 元素。

（1）请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

（2）最好对选择器进行分组，以最大程度地缩减代码。

（3）如需对选择器进行分组，请用逗号来分隔每个选择器。

5.所有简单的css选择器：

选择器	例子	例子描述
.class	.intro	选取所有 class="intro" 的元素。
#id	#firstname	选取 id="firstname" 的那个元素。
*	*	选取所有元素。
element	p	选取所有 <p> 元素。
element,element,..	div, p	选取所有 <div> 元素和所有 <p> 元素。

（二）组合器选择器：

1.css组合器：

（1）组合器是解释选择器之间关系的某种机制。

（2）CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

（3）CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

2.后代选择器：

（2）后代选择器匹配属于指定元素后代的所有元素。

（2）下面的例子选择 <div> 元素内的所有 <p> 元素：

div p { background-color: yellow; }

3.子选择器：

（1）子选择器匹配属于指定元素子元素的所有元素。

（2）下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：

div > p { background-color: yellow; }

4.相邻兄弟选择器：

（1）相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

（2）兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

（3）下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：

5.通用兄弟选择器：

（1）通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

（2）下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

div + p { background-color: yellow; }

6.所有css组合选择器：

选择器	示例	示例描述
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择其父元素是 <div> 元素的所有 <p> 元素。
element+element	div + p	选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。

（三）伪类选择器（根据特定状态选取元素）：

1.伪类用于定义元素的特殊状态。例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2.伪类的语法：

selector:pseudo-class { property: value; }

3.锚伪类：链接能够以不同的方式显示：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

4.伪类和css类：

（1）伪类可以与 CSS 类结合使用：

（2）当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover { color: #ff0000; }

5.悬停在<div>上，在 <div> 元素上使用 :hover 伪类的实例：

div:hover {
  background-color: blue;
}

6.简单的工具提示悬停;把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：

7.css-:sirst-child伪类：

（1）:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

（2）匹配首个 <p> 元素

8.配备所有<p>元素中的首个<i>元素

9.所有css伪类:

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

4.伪元素选择器（选取元素的一部分并设置其样式）

5.属性选择器（根据属性或属性值来选取元素）

黄赛馨

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础知识（1）

CSS 选择器CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：简单选择器（根据名称、id、类来选取元素）组合器选择器（根据它们之间的特定关系来选取元素）伪类选择器（根据特定状态选取元素）伪元素选择器（选取元素的一部分并设置其样式）属性选择器（根据属性或属性值来选取元素）...
复制链接

扫一扫