CSS选择器（基本+复合+伪类）

CSS选择器

基本选择器

标签选择器：使用标签名作为选择器->选中同名标签设置样式

类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"

id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"

通配符选择器 : *

复合选择器

后代选择器

子代选择器

并集选择器

伪类选择器

超链接状态

:link （点击前的状态）

:visited （点击后的状态）

:hover (鼠标悬停的状态)

:active (点击时的状态)

CSS选择器

作用：查找标签，设置样式

分类：CSS基本选择器和CSS高级选择器（扩展类）

基本选择器

作用：查找元素，对元素进行修饰

分类：标签选择器，类选择器，id选择器，通配符选择器

标签选择器：使用标签名作为选择器->选中同名标签设置样式

<html><head><title>网页标题</title><style>div{font-size:px}</style></head><body><div>hello world</div></body></html>

类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"

作用：为了使相同的标签具有差异化

<html><head><title>网页标题</title><style>.green{color:green;}</style></head><body><p class="green">what can i say</p></body></html>

id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"

<html><head><title>网页标题</title><style>#green{color:green;}</style></head><body><p id="green">what can i say</p></body></html>

通配符选择器 : *

作用：查找页面所有标签，设置相同样式

<html><head><title>网页标题</title><style>* {color:green;font-size: 30;}</style></head><body><p >what can i say</p><p>man<p></body></html>

复合选择器

复合选择器由两个或两个以上的基本选择器组成

作用：可以更加高效，准确的选择目标元素

分类：后代选择器，子选择器，并集选择器

后代选择器

作用：选中某元素的后代元素

选择器写法：父选择器子选择器{CSS属性},父选择器和子选择器之间用空格隔开

选择器会选中选择元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div span{font-size: 50px;}</style>
</head>
<body><div><span><p>hello world</p></span></div><span><p>hello world</p></span>
</body>
</html>

子代选择器

作用：选中某元素的后代元素

选择器写法：父选择器>子选择器{CSS属性} ，父选择器和子选择器之间用>隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div>p{font-size: 50px;}</style>
</head>
<body><div><span>hello world</span>  <!--这里span和p是同级的--><p>你好世界</p></div>
</body>
</html>

由于这里的span和p是同级的，如果用后代选择器的写法span和p里面的字体都会被修改

并集选择器

作用：选中多组标签设置相同的样式

选择器写法：选择器1，选择器2，...,选择器N{CSS属性},选择器之间用,隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,span,p{font-size: 50px;}</style>
</head>
<body><div> 你好你好</div><span>hello world</span>  <!--这里span和p是同级的--><p>你好世界</p></body>
</html>

伪类选择器

作用：伪类表示元素的状态，选中元素的某个状态设置样式

超链接一共有4个状态：

点击前
点击后
鼠标悬停
点击时

超链接状态

:link （点击前的状态）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:link{color:red;}</style>
</head>
<body><div> 你好你好</div><span><p>hello world</p></span>  <a href="KD.html">凯文杜兰特</a></body>
</html>