CSS选择器

西红柿挂面

于 2019-10-29 10:30:38 发布

阅读量151

点赞数 1

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

本文链接：https://blog.csdn.net/Bcxbclj/article/details/102793196

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS选择器：
ID选择器，CLASS选择器，标签选择器，通配选择器，标签群组选择器，层次选择器，属性选择器，伪类选择器
1.ID选择器（“#”）
ID是唯一值，在一个页面内只能出现一次，

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#elem{color:red;}
		</style>
	</head>
	<body>
		<div id="elem">666</div>
	</body>

2.CLASS选择器（“ . ”）
class选择器可以出现多次

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.elem{color:red;}
		</style>
	</head>
	<body>
		<div class="elem">666</div>
		<div class="elem">888</div>
	</body>

3.标签选择器

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{color:red;}
		</style>
	</head>
	<body>
		<div>666</div>		
	</body>

4.通配选择器（“*”）
去掉标签所有默认样式可用

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin：0；}
		</style>
	</head>

5.群组选择器(",")

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,p,span{color:red;}
		</style>
	</head>
	<body>
	<div>666</div>
	<p>888</p>
	<span>666888</span>
</body>

6.层次选择器(空格 > )
P Q{ 所有后代}；P>Q{父子}；P~Q{兄弟}；P+Q{相邻 }

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div #p1{color:red;}
		</style>
	</head>
	<body>
	<div id="item">
		<p id="p1">666</p>
	</div>
</body>

7.属性选择器

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div[class]{brackground:red;}
		</style>
	</head>
	<body>
	<div></div>
	<div class="item">该样式变化</div>
</body>

8.伪类选择器

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*hover，鼠标滑过样式*/
			a:hover{color:red;}
		</style>
	</head>
	<body>
	<div id="item">
		<a href="#"></a>
	</div>
</body>

鼠标（如果一起用，必须保证好顺序L-V-H-A）——：link,访问前样式（只适用a标签）；：visited访问后样式（只适用a标签）；：hover，鼠标移入效果（所有标签）；：active，鼠标按下（所有标签）
9.否定选择器（：not(selector)）