css之选择器

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

良良2号

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

阅读量50

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44386939/article/details/113920460

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

标签选择器
类选择器
id选择器
通配符选择器
后代选择器
子元素选择器
并集选择器
链接伪类选择器
focus伪类选择器

标签选择器

选择某一类标签。

<style>
	div {
		color: red;
	}
</style>

类选择器

将相同功能的样式封装到类中，方便统一修改。

<head>
	<style>
        .box {
            height: 100px;
            width: 100px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
	</style>
</head>
<body>
	<div class="box red"></div>
	<div class='box green'></div>
	<div class='box red'></div>
</body>

口诀：样式点定义，结构类(class)调用，一个或多个，开发最常用。

id选择器

一般用于页面唯一性的元素上，经常和javascript搭配使用。

<style>
	#red {
		font-color: red;
	}
</style>

<div id='red'>刘德华</div>
<div id='red'>梁朝伟</div>  /*错误：不可再次使用id选择器*/

口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

通配符选择器

选取页面所有元素(标签)

<style>
	* {
		margin: 0;
		padding: 0;
	}
</style>

在这里插入图片描述

后代选择器

选出所有的后代元素

 <style>
	 ol li {
	     color: pink;
	 }
	
	 ol li a {
	     color: red;
	 }
	
	 .nav li a {
	     color: yellow;
	 }
</style>

子元素选择器

选出 亲儿子 元素

<style>
    .nav>a {
        color: red
    }
</style>

并集选择器

多组标签 有着 相同的样式，标签之间用逗号隔开

<style>
    div,
    .pig>li {
        color: pink;
    }
</style>

链接伪类选择器

按照 LoVe HAte 的顺序书写。
a链接需要单独指定样式，不能给继承自body的样式。

    <style>
		a {
			color: red;
			text-decoration: none;
		}
		
		# 未访问过的链接，一般不使用。
        a:link {
            color: black;
            text-decoration: none;
        }
		
		# 访问过后的链接，一般不使用
        a:visited {
            color: black;
            text-decoration: none;
        }
		
		# 鼠标经过时的链接，经常使用
        a:hover {
            color: skyblue;
            text-decoration: underline;
        }
		
		# 鼠标按下未松开时的链接，一般不使用
        a:active {
            color: green;
        }
    </style>

focus伪类选择器

选取获得焦点的表单元素

<style>
    input:focus {
        background-color: pink;
        color: red;
    }
</style>

在这里插入图片描述

良良2号

关注

0
点赞
踩
0

收藏

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

选择器标签选择器选择某一类标签。<style> div { color: red; }</style>类选择器将相同功能的样式封装到类中，方便统一修改。<head> <style> .box { height: 100px; width: 100px; } .red { background-color: red;
复制链接

扫一扫