HTML+CSS基础篇5----选择器详解

选择器的分类可分为基本选择器,复合选择器,CSS3中新增的选择器三种类型来讲解。

1.基本选择器

在上一篇博客中已经介绍过基本选择器,在这里直接COPY过来。

1)类选择器

...

<body>

<p class="important_point">这是一个重点内容</p>

</body>

...
.important_point{

color:red; /*设置段落的字体颜色为红色*/

font-size:14px; /*设置字体的大小为14px*/

}

  2)id选择器

...

<body>

<p id="important_point">这是一个重点内容</p>

</body>

...
#important_point{

color:red; /*设置段落的字体颜色为红色*/

font-size:14px; /*设置字体的大小为14px*/

}

 3)标签选择器

...

<body>

<p>这是一个重点内容</p>

</body>

...
p{

color:red; /*设置段落的字体颜色为红色*/

font-size:14px; /*设置字体的大小为14px*/

}

  三种选择器的效果是一样的:

  总结:

  类选择器:格式(class="类名"),一个标签可以有多个类,多个标签也可以同属同一个类。css表示方法(.类型{属性名=属性值;})

  id选择器:格式(id="id名"),一个标签只有有一个属性名,同时id名是唯一的,不同的标签不能使用同一个id名。css表示方法(.id名{属性名=属性值;})

  标签选择器:直接使用标签即可.css使用方式(标签{属性名=属性值;})

2.复合选择器

   1)交集选择器

         交集选择器是由两个选择器直接构成的,结果是选中两个选择器各自范围的交集(第一个必须是标签选择器,第二个必须是类选择器或者ID选择器)

     标签选择器与类选择器形成的交集选择器

<div>
   <p class="toy">这是一个玩具</p>
</div>
div.toy{
    corlor:blue;
    font-size:20px;
}

标签选择器与id选择器形成的交集选择器

<div>
   <p id="toy">这是一个玩具</p>
</div>
div#toy{
    corlor:blue;
    font-size:20px;
}

    2)并集选择器

        就是同时选择多个选择器,多个选择器之间用","隔开,每个选择器可以是任何类型的选择器。

div,h1,p{
 ....
}

div.class1,#toy,p{
....
}

   3)后代选择器

       后代选择器是通过嵌套的方式,对特殊位置的HTML标签进行控制,写法是把外层标签写在前面,内层标签写在后面,标签与标签之间使用空格隔开。 

div li{
....
}
div li a{
....
}

   4)子选择器

     子选择器用于选中标签的直接后代(就是儿子,不是孙子),定义符号是大于号(>)

div>li{
....
}

    5)  相邻选择器

     相邻选择器的定义符号是(+),可以选择紧跟在它后面的一个兄弟元素(这两个元素具有共同的父元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试专用</title>
		<style>
			div+p{
				color:red;
			}
		</style>
	</head>
	<body>
	 <div>略略略略略略</div>
	 <p>本行是相邻选择器,所以字体颜色是红色</p>
	 <p>本行不与div相邻,所以字体颜色不是红色</p>
	</body>
</html>

 效果如下图所示:

3.CSS3新增的选择器

   在这里用一张思维导图来说明,显示的部分都是常用的,没有显示的部分都是不常用的。

本博客由博主原创,如需转载需说明出处!谢谢支持!

猜你喜欢

转载自blog.csdn.net/allenyhy/article/details/81128282