HTML-从零开始的学习过程（9）

最新推荐文章于 2024-09-17 00:54:14 发布

Dokey_L

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量165

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Dokey_L/article/details/106427444

版权

CSS3选择器

CSS3是CSS的升级版本，对比于以前的版本也多了些不同的选择器。
子元素选择器

概念：只能选择某元素的子元素；
语法格式：父元素>子元素 (father>children)；
说明：只能是子元素，子元素以下都不行！
兼容：ie8+、firefox、chrome、opera、safari

相邻兄弟元素选择器

概念：可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素；
语法：元素+兄弟相邻元素；
说明：直接兄弟元素！
兼容：ie8+ 、chrome 、safari、opera、firefox；

群组选择器

概念：具有相同样式的元素分组在一起，每一个选择器之间用逗号, 分隔开；
语法：元素1，元素2，…元素n；
说明：逗号是英文字符下的逗号“,”
兼容：ie6+、chrome、safari、opera、firefox；

属性选择器
概念：对带有指定属性的HTML元素设置样式，可以指定元素的某个属性，也可以同时指定属性名和属性值；
语法：元素[属性attribute]；
兼容：ie8+、chrome、safari、opera、firefox；

元素[属性=“属性值”]；
属性名=属性值
元素[属性~=“属性值”]；
属性名包含属性值的元素
元素[属性^=“属性值”]；
属性名以属性值开头的所有的元素
元素[属性$=“属性值”]；
属性名以属性值结尾的所有的元素
元素[属性*=“属性值”]；
属性名包含属性值的所有的元素
元素[属性|=“属性值”]；
选择属性名=属性值或者以属性值-开头的元素

注：
要注意元素[属性~=“属性值”]和元素[属性*=“属性值”]的区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<!-- 对带有指定属性的HTML元素设置样式，你可以指定元素的某个属性，或者你也可以同时同时指定属性名和属性值 -->
	<style type="text/css">
		a[href]{
			text-decoration: none;
		}
		/*属性名包含属性值的元素*/
		a[class~="two"]{
			color: red;
		}
		/*a[class*="two"]{
			color: yellow;
		}*/
	</style>
</head>
<body>
	<a href="#">0-0</a>
	<a class="one two" href="#1">0-1</a>
	<a class="two three" href="#2">0-2</a>
	<a href="#3">0-3</a>
	<a href="#4">0-4</a>
	<a href="#5" class="two12">0-5</a>
	<a href="3#" class="twoksa">0-6</a>
	<a href="4#" class="oktwo">0-7</a>
	<a href="5#" class="two-sas">0-8</a>
	<a href="#-6">0-9</a>
</body>
</html>

效果：
元素[属性~=“属性值”]，是0-1和0-2会变成红色；
元素[属性*=“属性值”]，是0-1，0-2，0-5到0-8都会变成黄色；

伪类选择器
包含：动态伪类（锚点伪类，用户行为伪类），UI元素状态伪类，CSS3结构类，否定选择器，伪元素。

动态伪类
说明：用户和网站交互的时候才能体现出的动态伪类。
锚点： :link，:visited
用户行为伪类： :hover， :active，:focus
UI元素状态伪类
:enabled ，:disabled ，:checked这一类伪类称为UI元素状态伪类。
兼容：ie9+ 、chrome 、safari、 opera 、firefox
结构类
1.:first-child
选择属于其父元素的首个子元素的每个element元素
兼容：ie8+ 、 chrome、 safari 、 opera 、 firefox
2.:last-child
属于父元素的最后一个子元素的每个element元素
兼容：ie9+ 、 chrome、 safari 、opera、 firefox4+
3.:nth-child(n)
匹配属于其父元素的第N个子元素，不论元素类型
说明：n(从0开始) ， 2n ，2n+1 ， 2n-1， odd奇数， even偶数
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+
4.:nth-last-child(n)
匹配属于其父元素的第n个子元素，不论元素的类型，从最后一个开始计算
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+
5.:nth-of-type()
匹配属于父元素的特定类型第N个子元素的每个元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+
6.:nth-last-of-type(n)
匹配属于父元素的特定类型第N个子元素的每个元素，从最后一个子元素开始计算
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+
7.：first-of-type
匹配属于父元素的特定类型第N个子元素的首个子元素的每个元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox
8.：last-of-type
匹配属于父元素的特定类型第N个子元素的最后一个子元素的每个元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox
9.:only-child
匹配父元素的唯一子元素的每个元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox
10.:only-of-type
匹配属于父元素的特定类型的唯一子元素的每个元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+
11.empty
匹配没有子元素（包括文本节点）的每个子元素
兼容：ie9+ 、 chrome 、 safari 、 opera 、firefox4+

注： type和child的区别
type --指定元素类型；
child–不限制元素类型；

否定选择器(:not)
概念：选择器匹配非指定元素/选择器的每个元素 – 表示除了这个元素，其他都可以选中；
语法：父元素:not(子元素/子选择器)；
兼容性：ie9+
伪元素选择器
概念：CSS伪元素用于向某些选择器设置特殊效果；
语法格式：元素::伪元素；
兼容：ie9+ 、 chrome 、safari 、 opera 、 firefox
1.::first-line
对第一行文本进行格式化
注：只能用于块状元素
2.::first-letter
用于向文本的首字母设置特殊样式
注：只能用于块状元素
3.::before
在元素的内容前面插入新内容
常用content配合使用
特点：第一个子元素/行级元素内容/通过content写入
4.::after
内容之后插入新内容
常用于content配合使用
多用于清除浮动
5.::selection
用于设置浏览器中选中文本后的样式设置
兼容：ie9+ 、火狐浏览器需加-moz-前缀