css选择器

最新推荐文章于 2024-07-25 15:44:34 发布

恐龙撞击的危机感

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量30

点赞数

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/zjf6666666/article/details/131864159

版权

通配符选择器

通配符选择器使用 " * " 来定义，用来匹配所有的元素

/*匹配所有的元素并为他们设置 background-color 属性*/
* {
	background-color:yellow; 
} 

/*匹配div元素内的所有元素并为他们设置 background-color 属性*/
div * {
	background-color:yellow;
}

标签选择器

标签选择器（元素选择器）是指用 html 标签名作为选择器，按标签名称分类，为页面中的某一类标签指定统一的 css 样式。

/*为所有的span标签设置color属性*/
span {
	color:red;
}

类选择器

可以把一些标签元素共同具有的样式放到同一个类里面，这些元素可以添加这个公共的类然后再添加自己独有的类

<style>
	.cont {
		margin:0 auto;
	}
	
	/*background-color属性是最后一个元素独有的属性样式（或和其他的元素的属性值不同），所以可以将last定义为它独有的一个类。*/
	.last {
		background-color:yellow;
	}
</style>
<div class="cont info"></div>
<div class="cont"></div>
<div class="cont last"></div>

id选择器

id 选择器一般用于选择页面唯一性的元素

<style>
	/* 为id为"pwd"的表单项设置width样式 */
	#pwd {
		width: 300px;
    }
</style>
<input type="password" id="pwd" />

伪元素选择器

伪元素常用来清除浮动或者用来添加不必出现在 html 结构文件中的元素以简化结构。

<style>
	/*在所有的 p 元素的最后面添加一个元素*/
	p:after { 
	display:block;
	content:"添加的内容";
	}
</style>
<body>
	<p>我的名字是 Donald</p>
	<p>我住在 Ducksburg</p>
</body>

伪类选择器

<a>元素伪类

a:link 用来选择未被访问过的链接。
a:visited 选择已经被访问过的链接。
a:hover 选择鼠标覆盖的链接。
a:active 选择鼠标按下的链接。

<style>
	a{
		font-size: 40px;
	}
	a:link {
		color:black;
	}
	a:visited {
		color:green;
	}
	a:hover{
		color: yellow;
	}
	a:active {
		color: blue;
	}
</style>
	<a href="https://www.baidu.com/">百度</a><br />
	<a href="https://map.baidu.com/">地图</a><br />
	<a href="https://tieba.baidu.com/index.html">贴吧</a><br />
	<a href="http://news.baidu.com/">新闻</a><br />

结构伪类选择器

E:first-child   匹配其父元素中的第一个子元素且这个子元素是E元素。
E:last-child   匹配其父元素中的最后一个子元素且这个子元素是E元素。
E:nth-child(n)   匹配其父元素中的第n个子元素且这个子元素是E元素。
E:first-of-type   匹配子元素中的第一个E元素。
E:last-of-type   匹配子元素中的最后一个E元素。
E:nth-of-type(n)   匹配子元素中的第n个E元素。

<style>
	
	p:nth-child(1) {
		color: red;
	}
	p:nth-child(4) {
		color: red;
	}
	p:nth-of-type(2) {
		color: red;
	}

	p:nth-child(odd){
		color: red;
	}

	p:nth-child(n+3){
		color: red;
	}
	p:nth-child(-n+2){
		color: blue;
	}

</style>
<body>
	<p>第1个p元素，第一个子元素</p>
	<div>第1个div元素，第二个子元素</div>
	<p>第2个p元素，第三个子元素</p>
	<div>第2个div元素，第四个子元素</div>
	<p>第3个p元素，第五个子元素</p>
	<p>第4个p元素，第六个子元素</p>
</body>

后代选择器

<style>
	
	.topnav a {
		font:18px/54px "微软雅黑";
	}
</style>
<div class="topnav">
	<a href="#"></a>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a> 
	</nav>         
</div>

子代选择器

<style>
	.topnav>a {
		font:18px/54px "微软雅黑";
	}
</style>
<div class="topnav">
	<a href="#"></a>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a> 
	</nav>         
</div>

恐龙撞击的危机感

关注

0
点赞
踩
0

收藏

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

E:nth-child(n) 匹配其父元素中的第n个子元素且这个子元素是E元素。E:first-child 匹配其父元素中的第一个子元素且这个子元素是E元素。E:last-child 匹配其父元素中的最后一个子元素且这个子元素是E元素。E:nth-of-type(n) 匹配子元素中的第n个E元素。E:first-of-type 匹配子元素中的第一个E元素。E:last-of-type 匹配子元素中的最后一个E元素。id 选择器一般用于。
复制链接

扫一扫