选择器（标签、类、多类名、id、通配符、伪类）

最新推荐文章于 2024-05-20 18:40:16 发布

时松

最新推荐文章于 2024-05-20 18:40:16 发布

阅读量1.5k

点赞数

分类专栏：基础文章标签：选择器

本文链接：https://blog.csdn.net/ice_yr/article/details/96145031

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

标签选择器

标签选择器：按标签名称分类
基本语法格式：
标签名{属性1：属性1;属性2：属性2；}或
元素名{属性1：属性1；属性2：属性2；}

<style type="text/css">
  p {
			color: #00f;
			font-size:14px;
		}
</style>

<body>
	<p>选择器</p>
	<p>选择器</p>
	<p>选择器</p>
</body>

类选择器

基本语法格式：
.类名{属性1：属性值；属性2：属性值；}
标签调用时用class"类名"(class 类）

.o {        /*声明类样式*/
			color: orange
		}
.n {
			color: blue
		}

<h1 class="o">类选择器</h1>          <!-- 引用类样式 class 单词 类 的意思  -->
	<h1 class="n">类选择器</h1>

注意：类名前加"."

案例：
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
         span {
			font-size: 100px;
		}
		.blue {
			color: blue
		}
		.red {
			color: red
		}
		.orange {
			color: orange
		}
		.green {
			color: green
		}
	</style>
</head>
<body>
    <span class="blue">G</span>
	<span class="red">O</span>
	<span class="orange">O</span>
	<span class="blue">g</span>
	<span class="green">l</span>
	<span class="red">e</span>
</body>

多类名选择器

例如：

<style type="text/css">
.font20 {
			font-size: 20px ;
		}
		.font14 {
			font-size: 14px;
		}
		.blue {
			color: blue;
		}
		.fontweight {
			font-weight: bold;
		}
	</style>

<div class="font20 blue">司马懿</div>
	<div class="font20">司马炎</div>
	<div class="font14 blue fontweight">司马昭</div>
	<div class="font14">曹操</div>
	<div class="font14">曹丕</div>

在例子中class=" "内可以放多个

id选择器

例：

#big {     
			color:pink	
		}

<div id="big">花</div>

id选择器与类选择器可结合记忆
id选择器： #名
id=“名”
类选择器：.名
class=“名”

注意：一般规定id选择器只能用一次，类选择器可以用多次(可能有的浏览器兼容性好id可以用不只一次但最好还是按规定来）

id选择器与类选择器的区别在使用次数上

通配符选择器

例：

* {
		color: purple;
	}

    <p>1</p>
	<p>1</p>
	<p>1</p>

	<h1>1</h1>
	<h1>1</h1>
	<h1>1</h1>

	<ul>
		<li>1</li>
		<li>1</li>
	</ul>

通配符选择器用”*“表示，它是所有选择器中作用范围最广的，能匹配网页中所有的元素
基本语法格式
*{属性1：属性值1; 属性2：属性值2；}
*指的是所有的标签

伪类选择器

用于向某些选择器添加特殊的效果
1个点.demo{} 为类选择器
2个点（冒号）：link{} 为伪类选择器
#####链接伪类选择器
:link （为未访问的链接）
:visited （已访问的链接）
:hover （鼠标移动到链接上）
:active （选定的链接）
例：

 <style>
		a:link {            /*未访问的链接*/
			font-size: 14px;  
			color: gray;    /*gray*/
			font-weight: 700;     /*bold*/
		}
		a:visited {         /*已访问的链接 我们已经点击过一次的状态*/
			font-size: 14px;  
			color: orange;
			font-weight:bold;     /*700*/
		}
		a:hover {           /*鼠标移动到链接上*/
			font-size: 14px;  
			color: red;
			font-weight: 700;     /*700*/
		}
		a:active{          /*选定的链接 当我们点击别松开鼠标显示的状态*/
			font-size: 14px;  
			color: green;
			font-weight: 700; 	
		}
	</style>

<body>
	<div>
		 <a href="#">点击</a> 
		 <a href="#">点击</a> 
	</div>
</body>

注意：写的时候它们顺序不可改变，:link和:hover比较常用

一般如下书写(链接伪类的简写方式）：

a {    /*a是标签选择器 所有的链接*/
   	font-weight: bold;
   	font-size: 16px; 
   	color:gray;
   }
a:hover{ /* hover链接伪类选择器 鼠标经过*/
   	color: red; /*鼠标经过的时候由原来的灰色变为红色*/
   }

<div> <a href="#">秒杀</a></div>

结构（位置）伪类选择器
:first-child 选取属于其父元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child 匹配属于其父元素的第n个元素，不论元素的类型even偶数odd奇数n从0开始
:nth-last选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式
注意：:nth-child后跟（）来填内容如下：

li:nth-child(odd){  /*可以选择所有的odd奇数的孩子标签*/
			color: skyblue
		}
li:nth-child(even){  /*可以选择所有的even偶数的孩子标签*/
			color: blue
		}

<ul>
		<li>1孩子</li>
		<li>2孩子</li>
		<li>3孩子</li>
		<li>4孩子</li>
		<li>5孩子</li>
</ul>

时松

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
选择器（标签、类、多类名、id、通配符、伪类）

标签选择器标签选择器：按标签名称分类基本语法格式：标签名{属性1：属性1;属性2：属性2；}或元素名{属性1：属性1；属性2：属性2；}<style type="text/css"> p{ color: #00f; font-size:14px; }</style><body> <p>选择器</p>...
复制链接

扫一扫