学习笔记（四）——CSS选择器

最新推荐文章于 2024-08-18 22:21:01 发布

weixin_47366357

最新推荐文章于 2024-08-18 22:21:01 发布

阅读量190

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_47366357/article/details/105849528

版权

什么是CSS？

CSS指层叠样式表（cascading style sheets），也称CSS样式表或级联样式表，跟HTML一样，也是一种标记语言。由于HTML的局限性，网页的内容只是单纯的填充，没有经过合理排布，样式丑陋，而用CSS可以解决这个问题，用于美化网页，包括设置页面的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）、版面布局和外观显示样式。

CSS规则

基本语法：

<style>
	选择器 {
		属性: 属性值;
	}
</style>

选择器是用于指定CSS样式的HTML标签，花括号是对该对象设置的具体样式。

代码风格

样式一般用展开格式书写，一行一个属性，看起来更直观

一般用小写字母

冒号、选择器后保留空格

CSS选择器

1.基础选择器（单个选择器）

（1）标签选择器——HTML标签名作为选择器

这种方式会把某一类标签名全部选择出来，能快速为页面同类型的标签统一设置样式，但缺点是不能设计差异化样式。

（2）类选择器——单独选择一个或几个标签

<style>
	.类名 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

<body>中哪个标签想使用这个样式就在自己标签后加一个属性class=“类名”，类名自定义，但最好有意义，便于后期维护修改，增加代码可读性。类名的命名规则：长名称或词组可以使用中横线来命名，不要用纯数字、中文命名。

注意：一个标签可以有多个类名，选择任意一个类名都可以选中这个标签；一个标签也有多个类名，多个类名之间用空格隔开。 实际开发中，一般将共同的样式写在一个类里，需要的标签都可以调用，再调用自己独有的类，节省代码，修改方便。

（3）id选择器

<style>
	#id名 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

id选择器与类选择器最大的区别在于使用次数上：类选择器相当于一个人可以有多个名字，同一个名字也可以被多个人使用；id选择器相当于人的身份证号码，是唯一的，不可以重复使用。id选择器一般用于页面上唯一的元素上，经常和js搭配使用。

（4）通配符选择器

通配符选择器用于将页面中所用的标签进行统一修改。

<style>
	* {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

最常用于清除所有元素的内外边距，因为在不同浏览器中,默认的各种边距一般不同，为了避免在不同浏览器上网页出现显示误差，一般在设置样式前都要先将所有边距全部清除一遍，由程序员重新统一设置。

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

2.复合选择器

复合选择器是由两个及以上的基础选择器通过不同方式组合而成，能够更准确高效选择目标元素（标签）。

（1）后代选择器（包含选择器）

可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

<style>
	<--! 表示元素1里面所有的元素2，只选择了元素2 -->
	元素1 元素2 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

注意：
- 元素2可以是儿子、孙子等
- 只要是元素1的后代就行。元素1和元素2可以是任意基础选择器

（2）子（元素）选择器

与后代选择器的区别在于：只能选择某元素的最近一级子元素，即直接后代。

（3）并集选择器

用于多组标签选择选择相同的样式。最后一个选择器不需要加逗号。

<style>
	元素1,
	元素2 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

（5）伪类选择器

用于向某些选择器添加效果，比如给链接添加特殊效果，或选择第一个，第n个元素。

链接伪类

伪类选择器	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接（最常用）
a:active	选择活动链接（鼠标按下未弹起的链接）

例如下方的代码可以实现将链接a设置成天蓝色，如果将鼠标移动到链接a上，会变成红色。

<style>
	a{
		text-decoration: none;
		color: skyblue;
	}
	a:hover {
		color: red;
	}
</style>
<body>
	<a href="#">我是空链接</a>
</body>

注意事项：

为了确保链接伪类选择器能够生效，要按照LVHA顺序声明。

链接a在浏览器中具有默认样式，直接对body进行整体修改是不会，这个涉及到优先级的问题，以后会有说明。改变链接a，需要给链接单独指定样式。

focus伪类选择器
用于获取焦点（光标）的表单元素，一般情况下<input>类表单元素才能获取。
例如下方代码可以实现当鼠标选中输入框时，输入框的背景颜色会变成红色：

<style>
	input:focus {
		background-color: red;
	}
</style>
<body>
	<input type="text">
</body>

weixin_47366357

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（四）——CSS选择器

什么是CSS？CSS指层叠样式表（cascading style sheets），也称CSS样式表或级联样式表，跟HTML一样，也是一种标记语言。由于HTML的局限性，网页的内容只是单纯的填充，没有经过合理排布，样式丑陋，而用CSS可以解决这个问题，用于美化网页，包括设置页面的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）、版面布局和外观显示样式。CSS规则基本语法：...
复制链接

扫一扫