选择器的应用

最新推荐文章于 2024-08-26 19:22:26 发布

山有梧桐

最新推荐文章于 2024-08-26 19:22:26 发布

阅读量151

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_51194826/article/details/117619365

版权

css选择器的分类

1.基础选择器

2.层次选择器

3.伪类选择器

4.伪元素

5.属性选择器

1基础选择器

基础选择器中有以下几个：

选择器	类型	功能描述
*	通配选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
E,F	群组选择器	将每一个选择器匹配的元素集合并

通配选择器 *

简而言之，就是将所有的内容设置成这个样式

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
<style type="text/css">
*{
	color: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<a href="#">这是一个链接</a>
</body>
</html>

通配符选择器 *内设置文字颜色为红色，<p>与<a>标签都设置为了红色

1.1元素选择器

将所有该元素设置为同一个属性

下例以<p>为例

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
	p{
		text-indent:2em;
	}
	</style>
</head>
<body>
<p>这是第一个段落</p><p>这是第二个段落</p>
</body>
</html>

所有<p>标签缩进了两个字符

1.2id选择器

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
	#id{
		font-size: 10px;
	}

	</style>
</head>
<body>
<div id="id">这是一段内容</div>
<div>这是一段内容</div>
</body>
</html>

由此可见，id选择器会将含有#id的div内的内容设置为#id里面的属性

1.3类选择器

类选择器与id选择器类似，

不过是使用 . 来标识

<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
	.class{
		font-size: 10px;
	}

	</style>
</head>
<body>
<div class="class">这是一段内容</div>
<div>这是一段内容</div>
</body>
</html>

由此可见，类选择器会将含有.class的div内的内容设置为.class里面的属性

1.4群组选择器

将多个选择器设置为同一个属性这之中用 , 隔开

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
	p,a,.class{
		font-size: 10px;
	}

	</style>
</head>
<body>
<div class="class">这是一段内容</div>
<div>这是一段内容</div>
<p>这是一个段落</p>
<a href="#">这是一个链接</a>
</body>
</html>

p,a,.class这一个整体被称为群组选择器，群组选择器的属性同样也是这些单独选择器的属性

2层次选择器

层次选择器含有以下几个选择器：

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

2.1后代选择器

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
	.class{
		font-size: 10px;
	}
	.class .class1{
		font-size: 15px;
	}
	.class1{
		font-size: 20px;
	}
	</style>
</head>
<body>
<div class="class">这是一段内容
<div class="class1">这是一段内容
</div>
</div>
<div class="class1">这是一段内容</div>
</body>
</html>

明显的是，在<div class="class">中的<div class="class1">比单独的<div class="class1">要小

说明后代选择器是在class="class"里匹配到的class="class1"的属性

2.2子选择器

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
ul li>p {
    color: blue;
}
	</style>
</head>
<body>
	<ul>
		<li>
			<p>一级菜单</p>
			<div>
				<p>二级菜单</p>
			</div>
		</li>
	</ul>
</body>
</html>

2.3相邻兄弟选择器

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
li:first-of-type + li {
  color: red;
}
	</style>
</head>
<body>
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
</body>
</html>

3伪类选择器

伪类用于定义元素的特殊状态。

例如，它可以用于：

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

由于选择器过多，简单挑选一个hover进行演示

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
.s1{
	width: 100px;
	height: 100px;
	background-color: red;
}
.s1:hover{
	background-color: green;
}

	</style>
</head>
<body>
<div class="s1"></div>
</body>
</html>

鼠标没有悬停在盒子中

鼠标悬停在盒子中

4伪元素

以p::after举例

<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<style type="text/css">
p::after{
content:"p";
background-color:yellow;
color:red;
font-weight:bold;
}

	</style>
</head>
<body>
<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>
</body>
</html>

需要添加内容就需要content属性

添加属性是设置的content的内容的属性

5属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

<html lang="en">
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
</body>
</html>

<html lang="en">
<head>
<style type="text/css">
a[href][title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<a title="#" href="#">test</a>

<hr />

<h1>无法应用样式：</h1>
<a href="#">test</a>
</body>
</html>

根据具体属性值选择

<html lang="en">
 <head><meta charset="UTF-8"> 
 <title>属性选择器</title>
  <style type="text/css"> 
  /* 某个标签里面的某个属性值 */ 
  .container[class]{ color:red; }
  /* div[title]{ color: red } */ /* 确切到某一个值 */ 
  input[type*="e"]{ color: red }
  /* 以什么为开始 */
   input[type^="e"]{ color: blue }
   /* 以什么为结束 */ 
   input[type$="rl"]{ color: green }
   /* 表示下一个标签 */ 
   .msg+p{ color: yellow }
   /* 属性名称可以等于某一个值 */ 
   [title="这是一个标题"]{ color: blue }
    </style> 
    </head> 
    <body>

<div class="container">这是一个div</div> 
<div title="这是一个标题">这是第二个div</div>
 <input type="text" name="" id="" value="张三"> 
 <input type="email" name="" id="" value="王五"> 
 <input type="url" name="" id="" value="李四">
 <hr> 
 <div class="msg">这是第三个div</div>
 <p id="msg2">这是一个段落</p>
 </body>
 </html>