已学过的

一.通配符选择器

*{} 选择所有元素，常用于清除内外边距

二.标签选择器

元素名称{} 根据标签选择标签里面的元素如a{},body{}

三.类选择器

.<类名>{} 根据class的值选择元素。类名的命名规则：不能以数字开头

四.Id选择器

#<id值> 根据ID的值选择元素

五.并集选择器

<选择器>，<选择器>使用逗号隔开同时匹配多个选择器取多个选择器的并集。如em,strong{}

六.后代选择器

<选择器> <选择器>使用空格隔开先匹配第二个选择器的元素，并且属于第一个选择器内

新学的

一.属性选择器

1.E[att^=value]属性选择器

它是指选择名称为E的标记，且该标记定义了att属性，att数值值包含前缀为value的子字符串。其中E可以省去，表示可以匹配满足条件的任意元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>E[att^=value]属性选择器</title>
<style>
p[id^=one]{
	color:red;
  	font-size:20px;
    }
</style>
</head>
<body>
	<p id="one">春暖花开</p>/*id名的前缀中含有one*/
	<p id="two">绿树成荫</p>
	<p id="one1">硕果累累</p>/*id名的前缀中含有one*/
	<p id="two2">白雪飘飘</p>
</body>
</html>

效果如下：
在这里插入图片描述

2.E[att$=value]属性选择器

它是指选择名称为E的标记，且该标记定义了att属性，att数值值包含后缀为value的子字符串。其中E可以省去，表示可以匹配满足条件的任意元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>E[att$=value]属性选择器</title>
<style>
p[class$=two]{
	color:pink;
  	font-size:20px;
    }
</style>
</head>
<body>
	<p class="xone">春暖花开</p>
	<p class="xtwo">绿树成荫</p>/*class名的后缀中含有two*/
	<p class="yone">硕果累累</p>
	<p class="ytwo">白雪飘飘</p>/*class名的后缀中含有two*/
</body>
</html>

效果如下：
在这里插入图片描述

3.E[att*=value]属性选择器

它是指选择名称为E的标记，且该标记定义了att属性，att数值值包含有value的子字符串。其中E可以省去，表示可以匹配满足条件的任意元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>E[att*=value]属性选择器</title>
<style>
p[class*=demo]{
	color:green;
  	font-size:40px;
    }
</style>
</head>
<body>
	<p class="onedemo">春暖花开</p>/*class名的中含有demo字符串*/
	<p class="demotwo">绿树成荫</p>/*class名的中含有demo字符串/
	<p class="dem1o">硕果累累</p>
	<p class="demo">白雪飘飘</p>/*class名的中含有demo字符串*/
</body>
</html>

效果如下：
在这里插入图片描述

二.关系选择器

作用的范围均是后面一个标签上

1.子代选择器

它用来选择某个元素的第一级子元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>子代选择器</title>
<style>
h1>strong{/*选择h1下的第一级子元素为strong的元素*/
	color: red;
	font-size: 20px;
	font-family: "微软雅黑"；
}
</style>
</head>
<body>
	<h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
	<h1>传智<em><strong>博客</strong></em>欢迎你！</h1>
</body>
</html>

效果如下：
在这里插入图片描述
补：可以看到第一个h1中的strong标签里面的元素被改变了。而第二个h1中的strong标签里面的元素并没有发生改变，因为其中的strong不是h1的第一级子元素

2.临近兄弟选择器

该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>临近兄弟选择器</title>
<style>
p+h2{
	color:green;
	font-size: 20px;
	font-family: "微软雅黑"；
}
</style>
</head>
<body>
<p>床前明月光</p>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>	
</body>
</html>

效果如下：
在这里插入图片描述

3.普通兄弟选择器

该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素不必紧跟第一个元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>普通兄弟选择器</title>
<style>
p~h2{
	color:green;
	font-size: 20px;
	font-family: "微软雅黑"；
}
</style>
</head>
<body>
<p>床前明月光</p>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>	
</body>
</html>

效果如下：
在这里插入图片描述

三.结构化伪类选择器

1.:root选择器

用于匹配文档根元素，在HTML中，根元素始终是HTML元素，也就是说对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:root选择器</title>
<style>
:root{
	color: red;
}
h1{
	color:green;
}
</style>
</head>
<body>
	<p>床前明月光</p>
	<h1>疑是地上霜</h1>
	<p>举头望明月</p>
	<h1>低头思故乡</h1>	
</body>
</html>

效果如下：
在这里插入图片描述

2.:not选择器

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，就可以使用：root选择器。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:not选择器</title>
<style>
body *:not(h3){/*除了h3标签的body标签里面的全部元素都是红色的*/
	color: red;
}

</style>
</head>
<body>
	<p>床前明月光</p>
	<h3>疑是地上霜</h3>
	<p>举头望明月</p>
	<h3>低头思故乡</h3>	
</body>
</html>

效果如下：
在这里插入图片描述

3.:only-child选择器

它用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“：only-child选择器”可以选择这个子元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>：only-child选择器</title>
<style>
li:only-child{/*选择只有一个li的父元素里面的li 标签*/
	color: red;
}
</style>
</head>
<body>
	<ul>
		<li>一代宗师</li>
		<li>叶问</li>
		<li>战狼</li>
	</ul>
	<ul>
		<li>侏罗纪世界</li>
	</ul>
</body>
</html>

效果如下：
在这里插入图片描述

4.:first-child&:last-child选择器

分别用于为父元素中的第一个或者最后一个子元素设置样式

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:first-child&:last-child选择器</title>
<style>
p:first-child{/*对p标签的父元素中的第一个标签且该标签为p标签设置样式*/
	color: red;
	font-size: 20px;
}
p:last-child{/*对p标签的父元素中的最后一个标签且该标签为p标签设置样式*/
    color: green;
    font-size: 20px;
 }
</style>
</head>
<body>
	<p>床前明月光</p>
	<p>疑是地上霜</p>
	<p>举头望明月</p>
	<p>低头思故乡</p>	
</body>
</html>

效果如下：
在这里插入图片描述

5.:nth-child(n)&:nth-last-child(n)选择器

该选择器是first-child和last-child选择器的扩展。用于匹配属于父元素的第n个子元素和倒数第n个子元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>nth-child(n)&:nth-last-child(n)选择器</title>
<style>
p:nth-child(2){ /*对p标签的父元素中的第2个标签且该标签为p标签设置样式*/
	color: red;
	font-size: 20px;
}
p:nth-last-child(2){ /*对p标签的父元素中的倒数第2个标签且该标签为p标签设置样式*/
    color: green;
    font-size: 20px;
 }
</style>
</head>
<body>
	<p>床前明月光</p>
	<p>疑是地上霜</p>
	<p>低头思故乡</p>
	<p>举头望明月</p>
	<h1>123</h1>
</body>
</html>

效果如下：
在这里插入图片描述

6.:nth-of-type(n)&:nth-last-of-type(n)选择器

它用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素。
其中n的值可以为：
1：odd（奇数）/even（偶数）
2：1,2,3…
3：2n/2n-1(其中n的值从1开始）

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:nth-of-type(n)&:nth-last-of-type(n)选择器</title>
<style>
h2:nth-of-type(odd){/*选择父元素中的h2标签中的为奇数个的h2标签设置样式*/
	color: pink;
	font-weight: bold;
}
h2:nth-of-type(even){ /*选择父元素中的h2标签中的为偶数个的h2标签设置样式*/
	color: green;
	font-weight: bold;
}
p:nth-last-of-type(2){/*选择父元素中的倒数第二个p标签设置样式*/
	font-weight: bold;
}
</style>
</head>
<body>
	<h2>网页设计</h2>
	<p>企业希望向浏览者传递的信息</p>
	<h2>Java</h2>
	<p>面向对象的程序设计语言</p>
	<h2>iOS</h2>
	<p>苹果公司开发的移动操作系统</p>
	<h2>PHP</h2>
	<p>超文本预处理器</p>
</body>
</html>

效果如下：
在这里插入图片描述

7.:empty选择器

它用来选择没有子元素或文本内容为空的所有元素。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:empty选择器</title>
<style>
p{
	width:150px;
	height: 30px;
}
:empty{
	background-color: #999;
}
</style>
</head>
<body>
	<p>床前明月光</p>
	<p>疑是地上霜</p>
	<p>举头望明月</p>
	<p></p>/*该p标签中的文本内容为空 */
	<p>低头思故乡</p>	
</body>
</html>

效果如下：
在这里插入图片描述

8.:target选择器

它用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，设置的样式才会起作用。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>:target选择器</title>
<style>
:target{
	background-color: blue;
}
</style>
</head>
<body>
	<p><a href="#new1">跳转至内容1</a></p>
	<p id="new1">内容1...</p>
</body>
</html>

效果如下：
点击前：
在这里插入图片描述
点击后：

伪元素选择器

1.before选择器

被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
基本语法如下：

<元素>:before{
	Content:文字/ul();
}

被选元素位于“:before”之前，“{}”中的content属性用来指定要插入的具体内容，可以为为图片或文本。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>before选择器</title>
<style>
p:before {
	content: "传智播客";
	color:red;
	font-size: 20px;
	font-weight: bold;
}
</style>
</head>
<body>
	<p>是目前覆盖面最广，项目最真实的视频教程之一</p>
</body>
</html>

效果如下：
在这里插入图片描述

2.after选择器

用于某个元素之后插入一些内容，使用方法与：before选择器相同。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>after选择器</title>
<style>
p:after{
	content: url(斑马.jpg);
}
</style>
</head>
<body>
	<p>斑马<br></p>	
</body>
</html>

效果如下：
在这里插入图片描述

六.链接伪类

1.链接伪类

在CSS中，通过链接伪类可以实现不同的链接转态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。超链接标记<a>的伪类有4种，具体如下表所示：
在这里插入图片描述

lxl513513

发布了6 篇原创文章 · 获赞 5 · 访问量 416

私信关注

初学HTML5——CSS选择器

已学过的

一.通配符选择器

二.标签选择器

三.类选择器

四.Id选择器

五.并集选择器

六.后代选择器

新学的

一.属性选择器

1.E[att^=value]属性选择器

2.E[att$=value]属性选择器

3.E[att*=value]属性选择器

二.关系选择器

1.子代选择器

2.临近兄弟选择器

3.普通兄弟选择器

三.结构化伪类选择器

1.:root选择器

2.:not选择器

3.:only-child选择器

4.:first-child&:last-child选择器

5.:nth-child(n)&:nth-last-child(n)选择器

6.:nth-of-type(n)&:nth-last-of-type(n)选择器

7.:empty选择器

8.:target选择器

伪元素选择器

1.before选择器

2.after选择器

六.链接伪类

1.链接伪类

猜你喜欢