CSS基础之选择器

沃和莱特

已于 2022-05-21 09:12:57 修改

阅读量2.6k

点赞数 13

分类专栏：前端文章标签： css css3 html

于 2022-05-01 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_64122448/article/details/124516545

版权

前端专栏收录该内容

23 篇文章 9 订阅

订阅专栏

前言：

CSS中的选择器有基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器，在了解选择器之前，我们需要了解：

<style type="text/css">
			/*
				CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
				
				CSS的语法：
					选择器 声明块
				
				选择器：
					- 通过选择器可以选中页面中指定的元素，
						并且将声明块中的样式应用到选择器对应的元素上

				声明块：
					- 声明块紧跟在选择器的后边，使用一对{}括起来，
						声明块中实际上就是一组一组的名值对结构，
							这一组一组的名值对我们称为声明，
						在一个声明块中可以写多个声明，多个声明之间使用;隔开，
						声明的样式名和样式值之间使用:来连接
			*/
			p{
				color:red;
				font-size:50px;
			}
		</style>
	</head>
	<body>
		<!-- 这是HTML的注释方式 -->
		<p style="color:red">今天天气真不错，PM2.5也就500</p>
		
	</body>

以下就是CSS中选择器的分类啦~

- 基础选择器

元素选择器： p{}、div{}等

类选择器: .类名{}

id选择器: #id值{}

通用选择器: *{}

<style type="text/css">
			/* 
				id选择器：
					作用：根据HTML元素的id属性的值选中有特定元素。
					语法：#id属性值 {}
					示例：#demo {}
					
				需求：将"乡音无改鬓毛衰"改成红色，字体大小改成40px，并为该页面设置一种背景色。
			 */
			#demo {
				color: red;
				font-size: 40px;
			}
			
			/* 
				通配符（通用）选择器
					作用： 选中当前页面的所有元素。
					语法： * {}
					
			 */
			* {
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<p>少小离家老大回，</p>
		<p id="demo">乡音无改鬓毛衰。</p>
		<p>儿童相见不相识，</p>
		<p>笑问客从何处来。</p>
	</body>

<style type="text/css">
			/* 
				类选择器：
					作用：根据类的值选中有特定class属性的元素。
					语法：.class属性值 {}
					示例：.demo {}
					
				需求：将当前页面后两句的文本改成红色，字体大小改成40px，并给页面设置一种背景色。
			 */
			.demo {
				color: red;
				font-size: 40px;
			}
			.abc {
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<p>少小离家老大回，</p>
		<p>乡音无改鬓毛衰。</p>
		<p class="demo abc">儿童相见不相识，</p>
		<p class="demo">笑问客从何处来。</p>
	</body>

- 组合选择器

子元素选择器：父元素 > 子元素 {}

后代选择器：父元素子元素 {}

兄弟选择器：兄 + 弟 {}、兄 ~ 弟 {}

交集选择器：选择器1选择器2选择器3选择器n{}

并集选择器：选择器1,选择器2,选择器3,选择器n{}

<style type="text/css">
		<!--兄弟元素选择器-->
		/*
		p~span{
			color:red;
		}
		*/
	   /*
		p~div>a{
			background-color: #F0FFFF;			
		}
		*/
	   /*
	   .demo ~ div > a{
		   background-color: #FF0000;
	   }
	   */
	  /*
	  div.red{
		  color: #FF0000;
		  font-size: 30px;
	  }
	  */
	  h1,span{
		  color: #00FFFF;
	  }
		</style>
	</head>
	<body>
		<div>
			我是一个div
			<h1>我是div中的元素
			<span>我是div中的p元素中的span元素</span>
			</h1>
			<span>我是div中的span元素</span>
			</div>
</body>

- 属性选择器

CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。attr() 表达式可以用于任何CSS属性。

[attr]{}:

[attr=value]{}:

[attr~=value]{}:

[attr^=value]{}:

[attr|=value]{}:

[attr$=value]{}:

[attr*=value]{}:

<title>CSS属性选择器</title>
		<style type="text/css">
		a[target][href] {
			color: #008000;
		}
		/*不带值的选择器
		[attr]{}
		*/
		a[target="_blank"] {
			background: #00FFFF;
		}
		/*含有值的选择器
		[attr=value]{}
		*/
	   
	   [title~=dark] {
		   border: 0.125rem solid green;
	   }
	  [class~=dark]{
		  color: #7FFFD4;
	  }
	  /*部分值属性选择器
	   [attr~=]{}
	  */
	 /*
	 [class^=top]{
		 background: #FF0000;
	 }
	 开头[arrt^=value]{}
	 [arrt|=value]{}
	 结尾[arrt$=value]{}
	 [arrt*=value]{}
	 */
	[class$="test"] {
		background: #F0FFFF;
	}
	 [class |=top]{
	 		 background: #FF0000;
	 }
	 div[name*="xy"]{
		 background: blue;
	 }
	 /*子串匹配属性选择器
	 语法：[attr |=value]
	 值必须是完整的或者是单独的单词，比如class="top",这时"top"或者是"top-其他单词"	 */
		</style>
	</head>
	<body>
		<h1> 示例1</h1>
		<h1 title="美丽中国">美丽中国</h1>
		<a target="流浪地球" href="聚居月球">流浪地球，聚居月球</a>
		<a href="你好" target="_blank">中国人，你好</a>
		<br/>
		<img  src="" title="backgroud" width="400px" height="240px" />
		<h1 class="bcg dark">这是一个h1标签</h1>
		<h2 class="abc">这是一个h2标签</h2>
		<p class="top">这是子串匹配属性选择器</p>
		<p class="top-text">这是子串匹配属性选择器2</p>
	    <p class="topcontent">这个就不能被子串匹配属性选择器选择</p>
	    <p class="mytest">这是一个段落</p>
		<div name="xy_dly" >好好学习</div>
		<span name="xy_zk">天天向上</span>
		<div name="xy_kkxx">开开心心</div>
	</body>

- 伪类选择器

1、伪类选择器，同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

2、伪类选择器分为两种，静态伪类和动态伪类。

（1）静态伪类：只能用于超链接的样式。

:link 超链接点击之前

:visited 链接被访问过之后

注意：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时。

:focus 是某个标签获得焦点时的样式

- 伪元素选择器

<style>
	    .firstChild {
	      color: lightcoral;
	    }
	
	    .lastChild {
	      color: lightseagreen;
	    }
	  </style>
	</head>
	
	<body>
	  <p>
	    <span class="firstChild">CSS 人家的全名叫 Cascading Style Sheets的啦</span>
		<br/>
	    <span class="lastChild">CSS 算是 HTML 的专业化妆师了。</span>
	  </p>
	  </body>