CSS入门与选择器详解：从基础到高级-优快云博客

本文链接：https://blog.youkuaiyun.com/jiangnb520/article/details/124864244

一. 什么是CSS

css是层叠样式表(Cascading Style Sheets), 是一种用来表现HTML或XML等文件样式的计算机语言,
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1. 引入方式

内部样式表

写在style标签中, 嵌入到html内部, 这样做可以让样式和页面结构分离, 但是分离的不够彻底, 尤其是css内容多的时候

行内样式表

通过style属性, 来指定某个标签的样式, 只适合写简单样式, 针对某个标签生效, 不能写太复杂的样式, 这种写法的优先级比较高, 可以覆盖其他样式

外部样式

创建一个css文件, 在html文件中使用link标签引入css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="css/common.css" />
</head>
</html>

2. 代码风格

紧凑风格

/*冒号后面带空格*/
/*选择器和 { 之间也有一个空格*/
p { color: red; }

展开风格

p { 
	color: red; 
}

二. 选择器

选择器主要是选中页面中指定的标签元素

1. 基础选择器

a) 标签选择器

将同一类型的标签都选择出来

<style>
	p {
	    color: red;
	}
	div {
	    color: green;
	}
</style>
<p>测试p标签</p>
<div>测试div标签</div>

b) 类选择器

通过标签内的类属性进行选择

<style>
	.t {
		color: blue;
	}	
</style>
<div class="t">测试类选择器</div>

注意:

使用类属性时, 样式以 . 开头
多个标签可以使用同一个类名. 一个标签也可以使用多个类(多个类要使用空格分割)
不要使用纯数字、中文或者标签名来命名类名

c) id选择器

CSS中使用 # 开头表示id选择器
id是唯一的, 不能被多个标签使用

<style>
	#t {
		color: blue;
	}	
</style>
<div id="t">测试id选择器</div>

d) 通配符选择器

使用 * 表示选取所有的标签

下面将所有的内容都改成蓝色

* {
	color: blue;
}

2. 复合选择器

a) 后代选择器

选择某个父元素中的子元素

下面代码可以修改li标签的内容而不影响ul标签

<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
</ul>
<ol>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
</ol>

ol li {
	color: red;
}

注意: 在样式中, ol和li元素中间有空格, ol 是父级, li是子级. 当然不光可以选择子级, 也可以选择子级的子级

<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li><a href="#">ccc</a></li>
</ul>

ul li a {
	color: yellow;
}
或者
ul a {
	color: yellow;
}

b) 子选择器

和后代选择器类似, 但只能选择子标签

<div class="one">
	<a href="#">链接1</a>
	<p><a href="#">链接2</a></p>
</div

.one>a {
	color: red;
}

c) 并集选择器

用于选择多组标签

通过逗号分割多个元素
表示同时选中多个元素
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写, 每个选择器占一行

<div>苹果</div>
<h3>香蕉</h3>
<ul>
	<li>鸭梨</li>
	<li>橙子</li>
</ul>

div,
h3,
ul>li {
	color: red;
}

d) 伪类选择器

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了, 但未弹起)

<a href="#">小猫</a>

a:link {
	color: black;
	/* 去掉 a 标签的下划线 */
	text-decoration: none;
} a
:visited {
	color: green;
} a
:hover {
	color: red;
} a
:active {
	color: blue;
}

force伪类选择器

选择获取焦点input表单元素

<div class="one">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>

.one>input:focus {
	color: red;
}

未被选中的标表单字体就会变成红色

CSS选择器常用方法

目录