CSS3选择器

最新推荐文章于 2023-06-22 15:09:42 发布

甘乐2333

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量107

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/88997770

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

CSS3选择器

1.属性选择器（html属性）
E[att]{sRules} 选取带有指定属性的元素

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img[title]{border: 5px #000000 solid;}
			img[alt]{border: 5px #000000 solid;}
		</style>
	</head>
	<body>
		<img src="" alt="aa">
		<img src="" title="aa">
	</body>
</html>

E[att="val"]{sRules} 选取带有指定属性和值的元素

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input[type="text"] {}
			input[type="submit"] {}
		</style>
	</head>
	<body>
		<input type="text" />
		<input type="submit" />
	</body>
</html>

E[att~="val"]{sRules} 选取属性值中包含指定词汇的元素

E[att|="val"]{sRules} 选取带有以指定值开头的属性值的元素，该值必须是整数个单词


img[class|="b"]{border:5px #000 solid;}
<img src="" class="b-img">

E[att^="val"]{sRules} 匹配属性值以指定值开头的每个元素

img[class|="b"]{border:5px #000 solid;}
<img src="" class="bimg">

E[att$="val"]{sRules} 匹配属性值以指定值结尾的每个元素

E[att*="val"]{sRules} 匹配属性值中包含指定值的每个元素

2.伪类选择器

结构性伪类选择器
语法： :first-child与:last-child 单独指定第一个子元素和最后一个子元素的样式
:nth-child与nth-last-child 对指定序号的子元素使用格式（先编号，再按li添加样式,如果li中混入一其他标签，也进行编号但不改变样式）


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav1 li:first-child {background-color: #00FF00;}
			.nav1 li:last-child {background-color: #00FF00;}
			.nav1 li:nth-child(2) {background-color: #FF0000;}
			.nav1 li:nth-last-child(2) {background-color: #FF0000;}
		</style>
	</head>
	<body>
		<h1>列表A</h1>
		<ul class="nav1">
			<li>列表项目1</li>
			<li>列表项目2</li>
			<li>列表项目3</li>
			<li>列表项目4</li>
			<li>列表项目5</li>
			<li>列表项目6</li>
			<li>列表项目7</li>
			<li>列表项目8</li>
			<li>列表项目9</li>
		</ul>
	</body>
</html>

对所有第奇数个子元素或第偶数个子元素使用样式
:nth-child(odd){} 所有正数下第奇数个子元素
:nth-child(even){} 所有正数下第偶数个子元素
:nth-last-child(odd){} 所有倒数上第奇数个子元素
:nth-last-child(even){} 所有倒数上第偶数个子元素

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav2 li:nth-child(odd) {background-color: #FF0000;}
			.nav2 li:nth-child(even) {background-color: #FFff00;}
		</style>
	</head>
	<body>
		<h1>列表B</h1>
		<ul class="nav2">
			<li>列表项目1</li>
			<li>列表项目2</li>
			<li>列表项目3</li>
			<li>列表项目4</li>
			<li>列表项目5</li>
			<li>列表项目6</li>
			<li>列表项目7</li>
			<li>列表项目8</li>
			<li>列表项目9</li>
		</ul>
	</body>
</html>

:nth-of-type与:nth-last-of-type css3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型的子元素进行计算
:nth-child(αn+β)与 :nth-last-child(αn+β) α表示每次循环中共包括几种样式，β表示指定的样式在循环中所处位置
:only-child 只有一个元素时使用

目标伪类选择器
:target 突出显示活动的HTML锚

3.层级选择器
E>F{sRules} 子选择器
E+F{sRules} 相邻兄弟选择器
E~F{sRules} 通用兄弟选择器

4.常见前缀
-webkit- 基于webkit浏览器 Chrome
-moz- 基于Gecko引擎的浏览器 Firefox
-ms- IE浏览器专属CSS属性
-o- Opera浏览器

甘乐2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

CSS3选择器1.属性选择器（html属性）E[att]{sRules} 选取带有指定属性的元素<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img[title]{border: 5px ...
复制链接

扫一扫

专栏目录