CSS基本选择器

CSS基本选择器使用

一、CSS的基本介绍

CSS是一种样式渲染表(Cascading Style Sheets)，主要是用来描述HTML语言的，能够控制HTML语言呈现出来的视觉效果。

二、基本选择器的使用

id选择器

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

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

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

这条 CSS 规则将应用于 id=“test” 的 HTML 元素：

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

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

css类选择器

类选择器使用html的类名属性来选择特定元素。

一般在html文件中使用class=“类名"来进行标识，在css中使用”.类名"进行选用。

使用class="test"的html元素

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

还可以只指定特定的某一标签下的class名

p.test{
	text-align: center;
}

指点p标签下的class="test"的内容居中

注意：类名也不能以数字开头

通用选择器

运用通用选择器会将html所有页面内容设置为特定的样式

* {
	color: red;
}

会将html所有内容字体颜色设置为红色

标签选择器

使用html各种标签元素作为选择器

h1 {
	backgroud-color: red;
}

p {
	backgroud-color: red;
}

将h1和p标签下的内容背景颜色更改为红色

后代选择器

写法：选择器1选择器2选择器3…{}，每个选择器之间使用空格隔开。

div .li	{
	color: yellow;
}

div .li {}表示选中的元素包括div里面的class="li"的元素，其中class="li"的元素可以是div的子代，也可以是div的后代，也可以是孙代及往后

子代选择器

写法：选择器1>选择器2>选择器3…{},每个选择器之间使用大于号分割。

div>ul	{
	color: bule;
}

div>ul{}表示ul必须是div的直接子代，孙代以后不选择

交集选择器

写法：选择器1选择器2…{}，选择器之间没有分割符。

.list#li {
	color: red;
}

.list#li{}表示必须同时满足class=“list”,并且满足id="li"的元素样式才能改变

并集选择器

写法：选择器1，选择器2，…{},选择器之间使用逗号隔开。

.li,#li {
	color: red;
}

表示只要具备其中一个样式就可以生效

伪类选择器

写法：选择器名称：伪类状态{}。

a:hover {
	color: red;
}

常见的伪类状态如下：

• link:未访问状态
• visited:已访问状态
• hover:鼠标指向时，即悬停在元素上方时
• active:激活选定状态(鼠标点下去没松开)
• focus:获得焦点时(input常用)

超链接多种伪类共存时的顺序如下：

link>visited>hover>active