CSS-常用的选择器

六种常用的选择器

  • 准备工作
  • 1、id选择器
  • 2、class选择器(类选择器)
  • 3、标签选择器
  • 4、通配符
  • 5、分组选择器
  • 6、后代选择器
  • 7、伪类选择器

准备工作

  • 使用div标签

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器title>
	head>
	<body>
		<div>
			选择器
		div>
		
	body>
html>

结果

1、id选择器

  • id选择器,在div标签中设置一个id属性,在style标签中以以#开始后面跟div标签的id属性。
  • 这里就像给标签一个身份证号,然后在style标签中通过这个身份证号找到对应的标签,声明该标签的样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器title>
	head>
	<style>
		#id_div{
			color: red ;
		}
	style>
	<body>
		<div id="id_div">
			id选择器
		div>	
	body>
html>

结果
CSS-常用的选择器_第1张图片

这里文字的颜色已经改变了,这里就是通过id选择器改变具有该id名的标签
注意:这里的id选择器指定标签的id属性不能重复。

2、class选择器(类选择器)

  • 类选择器给标签指定一个class属性

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器title>
	<style>
		#id_div{
			color: red ;
		}
		.class_div{
			font-size: 36px;
		}
	style>
	head>
	<body>
		<div id="id_div">
			id选择器
		div>
		<div class="class_div">
			class选择器(类选择器)
		div>
	body>
html>

结果
CSS-常用的选择器_第2张图片
注意:虽然id选择器指定的id属性名必须不同,但是这里类选择器指定的属性,可以给多个标签指定相同的class属性,然后通过类选择器把相同的class属性的标签选择出来。
比如:


<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器title>	
	<style>
		#id_div{
			color: red ;
		}
		.class_div{
			font-size: 36px;
		}
	style>
	head>
	<body>
		<div id="id_div">
			id选择器
		div>
		<div class="class_div">
			class选择器(类选择器)
		div>
		<div class="class_div">
			第二个类选择器
		div>
	body>
html>

结果:
CSS-常用的选择器_第3张图片
这里可以看出给两个具有相同class属性的标签声明了相同的样式。

3、标签选择器

  • 标签选择器,指定相同的标签声明同样的样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器title>
		<style>
			span{
				color: red;
				font-size: 32px;
			}
		style>
	head>
	<body>
		<span>标签选择器span>
		<span>||标签选择器span>
	body>
html>

结果
CSS-常用的选择器_第4张图片

4、通配符

  • 可以通配符可以匹配任意的标签

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			*{
				color: red;
				font-size: 36px;
			}
			
		style>
	head>
	<body>
		<span>通配符选择器span>
		<div>通配符选择器div>
		<a href="#">通配符选择器a>
	body>
html>

结果
CSS-常用的选择器_第5张图片

5、分组选择器

  • 可把多个标签或者id选择器或者类选择器等分为一组

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			div,a,#id_b{
				color: red;
				font-size: 36px;
			}
		style>
	head>
	<body>
		<div>分组选择器div>
		<span>分组选择器span>
		<p>分组选择器p>
		<a>分组选择器a>
		<p >分组选择器p>
		<b id="id_b">分组选择器b>
	body>
html>

分组选择器
CSS-常用的选择器_第6张图片
注意:分组选择器只是把声明样式的选择器写在一起,它和分开写没有区别,只是提高了代码复用率。

6、后代选择器

后代选择器的写法

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;

}


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			html body a{
				color: red;
				text-decoration: none;
			}
		style>
	head>
	<body>
		<a href="http://www.baidu.com">百度一下a>
	body>
html>

结果

7、伪类选择器

  • 伪类选择器有很多属性,这里说4个常用的属性

:link, :visited, :hover,:active
若:link、:visited、:hover和:active一起使用,:hover 必须被置于 :link 和 :visited 之后,:active 必须>被置于 :hover 之后,即:link -> :visited -> :hover -> :active ,简记love hate(爱恨)。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			a{
				color: black;
				font-size: 24px;
				text-decoration: none;
			}
			a:link{
				color: green;
			}
			a:visited{
				font-size: 72px;
				color: yellow;
			}
			a:hover{
				font-size: 36px;
				text-decoration: underline;
				color:red;
			}
			a:active{
				font-size: 72px;
			}
		style>
	head>
	<body>
		<a href="http://www.baidu.com">百度a>
	body>
html>

未进行操作
CSS-常用的选择器_第7张图片

鼠标放在a标签上面
CSS-常用的选择器_第8张图片
点击链接但是不释放
CSS-常用的选择器_第9张图片
访问过的网站
CSS-常用的选择器_第10张图片

你可能感兴趣的:(前端)