CSS选择器常见用法

CSS选择器常见用法

基本语法规范

选择器+{n条声明}

选择器决定修改谁

声明决定修改什么

hello world
1
2
3
4
5
6
7
8
9
10

1

修改前：

修改后：

行内样式表

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

猜猜我是什么颜色的
1
2
3
4
5
6

可以看到红色并没有显示出来.

外部样式

实际开发中最常用的方式.

1. 创建一个 css 文件.

2. 使用 link 标签引入 css

   
   1

示例：

test.html

    
    
    
    
    


    
红红火火恍恍惚惚

1
2
3
4
5
6
7
8
9
10

style.css

div {
	color: red;
}
1
2
3

优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效

基础选择器

标签选择器

特点：

※ 能快速为同一类型的标签都选择出来

※ 但是不能差异化选择

<style>
p {
	color: red;
}
div {
	color: green;
}
style>
<p>娃哈哈p>
<p>爽歪歪p>
<p>拜拜拜p>
<div>猪八戒div>
<div>孙悟空div>
<div>沙悟净div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

类选择器

特点：

※ 差异化表示不同的标签

※ 可以让多个标签都是用同一个标签

<style>
.blue {
	color: blue;
}
style>
<div class="blue">汤姆猫div>
<div>汤姆猫div>
1
2
3
4
5
6
7

注意事项：

• 类名用 " . "开头
• 下方的标签使用 class 属性来调用
• 一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要是用空格分割）
• 如果是长的类名，可以使用 “ - ”分割。
• 不要使用纯数字，中文，以及标签名来命名类名

多个类名的示例：

<style>
.box {
    width: 200px;
    height: 150px;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
style>
<div class="box red">div>
<div class="box green">div>
<div class="box red">div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

id选择器

id选择器和类选择器类似

• CSS中使用“ # ” 开头表示 id选择器

• id 选择器的值和 html 中某个元素的 id 值相同

• html 的元素 id 不必带 “ # ”

• id 是唯一的，不能被多个标签使用

示例：

<style>
#ha {
	color: red;
}
style>
<div id="ha">哈哈哈div>
1
2
3
4
5
6

通配符选择器

使用 * 定义，选取所有的标签

* {
	color: red;
}
1
2
3

页面中所有内容都会被改成 red

复合选择器

后代选择器

后代选择器又叫包含选择器，选择某个父元素中的某个子元素

元素1 元素2 {样式声明}

元素1 和 元素 2 要使用空格分割

元素1 是父级，元素2 是子级，只选择元素2，不影响元素1

示例：只更改 ol 中的 li 的颜色，不影响 ul 中的。

ol li {
	color: red;
}

aaa
bbb
ccc


ddd
eee
fff

1
2
3
4
5
6
7
8
9
10
11
12
13

示例：更改 子级 的 子级

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

aaa
bbb
"#">ccc

1
2
3
4
5
6
7
8
9
10
11
12

示例：任意 基础选择器的组合（包括类选择器、id选择器）

.one li a {
	color: green;
}
"one">
ddd
eee
"#">fff
"#">fff
"#">fff

1
2
3
4
5
6
7
8
9
10

子选择器

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

元素1 > 元素2

• 使用 大于号 分割
• 只选亲儿子，不能选“孙子元素”

.two>a {
	color: red;
}
"two">
"#">链接1// 颜色变成红色
"#">链接2
// 不收影响

1
2
3
4
5
6
7

并集选择器

并集选择器用于选择多组标签

元素1，元素2{ 样式声明 }

• 通过 逗号 分割多个元素
• 表示同时选中 元素 1 和 元素 2
• 任何基础选择器都可以使用 并集选择器

示例：

苹果
香蕉

鸭梨
橙子

//把苹果和香蕉改成红色
div, h3 {
	color: red;
}
1
2
3
4
5
6
7
8
9
10

伪类选择器

链接伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接（鼠标按下了但是未弹起）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

force伪类选择器

获取焦点的input 表单元素

示例：

.three>input:focus {
	color: red;
}
1
2
3
4
5
6
7
8
9

:visited {
	color: green;
} a
:hover {
	color: red;
} a
:active {
	color: blue;
} a
{
	color: black;
} a
:hover {
	color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

##### force伪类选择器

获取焦点的input 表单元素

示例：

```css






.three>input:focus {
	color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17