• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

CSS3的基本选择器、层次选择器、结构伪类选择器、属性选择器

武飞扬头像
wx64708a0aefe0b
帮助4

CSS3引入了许多新的选择器,以增强对HTML元素的选择和样式化能力。下面是CSS3的一些基本选择器、层次选择器、结构伪类选择器和属性选择器的介绍:

  1. 基本选择器:
  • 元素选择器:通过元素名称选择元素,例如 p 选择所有 <p> 元素。
  • 类选择器:通过类名选择元素,例如 .my-class 选择所有具有 my-class 类的元素。
  • ID选择器:通过元素的唯一ID选择元素,例如 #my-id 选择具有 my-id ID的元素。
  • 通配选择器:选择所有元素,例如 * 选择页面上的所有元素。
  1. 层次选择器:
  • 后代选择器:选择某个元素的后代元素,例如 div p 选择所有 <div> 元素内的 <p> 元素。
  • 子元素选择器:选择某个元素的直接子元素,例如 ul > li 选择所有 <ul> 元素下的直接子级 <li> 元素。
  • 相邻兄弟选择器:选择某个元素的下一个相邻兄弟元素,例如 h2 p 选择紧接在 <h2> 元素后的 <p> 元素。
  • 通用兄弟选择器:选择某个元素之后的所有兄弟元素,例如 h2 ~ p 选择所有在 <h2> 元素之后的 <p> 元素。
  1. 结构伪类选择器:
  • :first-child:选择作为其父元素的第一个子元素的元素。
  • :last-child:选择作为其父元素的最后一个子元素的元素。
  • :nth-child(n):选择作为其父元素的第 n 个子元素的元素。
  • :nth-last-child(n):选择作为其父元素的倒数第 n 个子元素的元素。
  • :only-child:选择作为其父元素的唯一子元素的元素。
  1. 属性选择器:
  • [attribute]:选择具有指定属性的元素,例如 [target] 选择具有 target 属性的元素。
  • [attribute=value]:选择具有指定属性和值的元素,例如 [type=text] 选择具有 type 属性值为 text 的元素。
  • [attribute^=value]:选择具有以指定值开头的属性值的元素,例如 [href^=https] 选择具有以 https 开头的 href 属性值的元素。
  • [attribute学新通=.png]选择具有以.png结尾的src` 属性值的元素。
  • [attribute*=value]:选择具有包含指定值的属性值的元素,例如 [class*=btn] 选择具有包含 btnclass 属性值的元素。

这些选择器可以单独使用,也可以组合使用,以便更精确地选择和样式化HTML元素。

下面是示例代码

1、三种基本选择器

优先级:id选择器>类选择器>标签选择器

/*
 标签选择器 ,可以作用于HTML里面的所有这种标签
 */
h1{
	color: red;
	background-color: aquamarine;
	border-radius: 5px;
}
p{
	font-size: 38px;
}
/*
 类选择器,.class类名,可以多个标签归类
*/

.xuexi{
	color: blue;
	background-color: beige;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/*
id选择器,#id名称,全局唯一
*/
#one{
	color:green;
	background-color:white;
	border-radius: 10px;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://blog.51cto.com/css/t01.css"/>
	</head>
	<body>
		<h1>我在学习</h1>
		<h1>html 和css</h1>
		<p>还要学习javascrip</p>
		<h2 class="xuexi">学完了前端,还要学习后端</h2>
		<p class="xuexi">还要学习框架,比如springboot</p>
		<h3 id="one">有点想学Vue</h3>
		
	</body>
</html>

2、层次选择器

/*
后代选择器,中间用空格隔开,body标签里面的所有p标签都在作用范围内
*/
/*
body p{
	background-color: aqua;
}
*/
/*
子选择器,中间用大于号连接,只有body标签里面的直接从属于body的p标签在作用范围内
*/
/*
body>p{
	background-color: blue;
}
*/
/*
相邻兄弟选择器,中间用 号连接,只会作用于类名为root的标签的下面一个同类标签
*/
/*
.root  p{
	background-color: red;
}
*/
/*
通用兄弟选择器,中间用波浪号~连接,会作用于类名为root的标签下面的所有同类标签
*/
.root ~p{
	background-color: brown;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://blog.51cto.com/css/t02.css"/>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<p class="root">p3</p>
		<p>p4</p>
		<ul>
			<li>
				<p>p5</p>
			</li>
			<li>
				<p>p6</p>
			</li>
			<li>
				<p>p7</p>
			</li>
		</ul>
		<p class="root">p8</p>
		<p>p9</p>
	</body>
</html>

3、结构伪类选择器

/*
选择 ul 下面的第一个li,其他结构类似
*/
/*
ul li:first-child{
	background-color: aqua;
}
*/
/*
选择 ul下面的最后一个li
*/
/*
ul li:last-child{
	background-color: antiquewhite;
}
*/
/*
下面两个认识就行
*/
p:nth-child(2){
	background-color: black;
}

p:nth-of-type(2){
	background-color: coral;
}
/*
当鼠标放到a标签上时,会起作用
*/
a:hover{
	background-color: black;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://blog.51cto.com/css/t03.css"/>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<p>p4</p>
		<ul>
			<li>
				<p>p5</p>
			</li>
			<li>
				<p>p6</p>
			</li>
			<li>
				<p>p7</p>
			</li>
		</ul>
		<p>p8</p>
		<p>p9</p>
		<a href="https://www.百度.com">百度</a>
	</body>
</html>

4、属性选择器

/*
有 id 属性的标签都在作用范围内
*/
/*
a[id]{
	background-color: aqua;
}
*/
/*
指定 id 为root的标签
*/
/*
a[id="root"]{
	background-color: blue;
}
*/
/*
选择 class 中有css的标签,用 星等号,表示包含它
*/
/*
a[class*="css"]{
	background-color: green;
}
*/
/*
选择href属性里以 https开头的标签
*/
a[href^="https"]{
	background-color: crimson;
}
/*
选择href属性里以 jpg结尾的标签
*/
a[href$="jpg"]{
	background-color: darkmagenta;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://blog.51cto.com/css/t04.css"/>
	</head>
	<body>
		<a href="https://www.百度.com" class="js" id="root">百度</a>
		<a href="http://www.atguigu.com" class="html css">尚硅谷</a>
		<a href="https://blog.51cto.com/u_16131726/hello.jpg" id="app">谷歌</a>
	</body>
</html>

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhhkikb
系列文章
更多 icon
同类精品
更多 icon
继续加载