CSS选择器
2019-08-06 本文已影响0人
Yonginggg
CSS选择符(选择器)
定义了影响文档中的哪些部分
分类:
- 元素选择符
- 关系选择符
- 属性选择符
- 伪类选择符
- 伪对象选择符
元素选择符
通配符: *{}
通配符被我们用作初始化操作
.css
在.css文件中写入以下内容,网页的背景颜色就变成了蓝色
*{
background-color: blue
}
image
类选择符: .类名称{}
.css
.hp{
color: white
}
.html
<body>
<p class="hp">hello world</p>
</body>
将clss类型为hp的文字显示成白色
image
id选择符: #id名称{}
类似于类选择符
.css
#hs{
color: chartreuse
}
.html
<body>
<p class="hp">hello world</p>
<span id="hs">hello world</span>
</body>
第二个hello world变成了绿色
image
类型选择符( 标签选择符): 标签{}
.css
li{
color: red
}
.html
<body>
<p class="hp">hello world</p>
<span id="hs">hello world</span>
<ul>
<li>hello world</li>
</ul>
</body>
image
列表变成了红色
关系选择符
子元素选择器: 父亲>儿子
选择的是子元素
.css
h1>strong {
color: red;
}
.html
<body>
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>
This is <em>really <strong>very</strong></em> important.
</h1>
</body>
image
兄弟选择器: 你自己~你的兄弟
相邻选择器: E+F
选择的是紧贴在E元素后的F元素
.css
P+P{
color: red
}
.html
<body>
<h3>one</h3>
<p>hello world</p>
<p>hello world</p>
<h3>two</h3>
<p>hello world</p>
<h3>three</h3>
<p>hello world</p>
<p>hello world</p>
</body>
image
因为选择的是跟在p后面的p,所以one和two的第二句hello world会变成红色,而two中的hello world不会变色
包含选择器: E F
选择包含在E中的F
.css
ul li{
color: red
}
.html
<body>
<ul>
<li>hello world</li>
<li>
<ul>
<li>hello world</li>
<li>hello world</li>
</ul>
</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
image
因为是ul li {},所以所有包含在ul内的li都会变成给红色,同时li的子元素也会变成红色
属性选择符
当前元素[属性]{}
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>属性选择器</title>
<style>
a[href]{
color: red
}
</style>
</head>
<body>
<a href="a">hello world</a>
<a>hello world</a>
</body>
</html>
image
可以看到第一个hello world变成了红色,第二个依然是黑色.这是因为我们对属性为href的设置了显示样式
当前元素[属性]="属性值"{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>属性选择器</title>
<style>
a[href='a'] {
color: red;
}
</style>
</head>
<body>
<a href="a">hello world</a>
<!-- <a>hello world</a> -->
<a href="b">hello world</a>
<a href="c">hello world</a>
</body>
</html>
image
只有属性href的属性值为a的才能变红
伪类选择符
允许给html标签的某种状态设置样式
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后
可靠的顺序: link visited hover active (注记 love hate)
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器</title>
<style>
ul li a {
font-size: 50px
}
/*未被访问的状态*/
ul li a:link {
color: blue
}
/*鼠标悬停状态*/
ul li a:hover {
color: aquamarine
}
/*访问过后状态*/
ul li a:visited{
color:chartreuse
}
/*鼠标点击状态*/
ul li a:active{
color:coral
}
</style>
</head>
<body>
<ul>
<li>
<a href="a">hello world</a>
</li>
</ul>
</body>
</html>
最开始的样子
image
鼠标悬停
image
鼠标点击未放开
image
伪对象(伪元素)选择符
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
选择器的优先级
important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
font-size: 100px
}
span{
color:red
}
p span{
color:green
}
p .a{
color:blue
}
p #b{
color:blueviolet
}
</style>
</head>
<body>
<p>
<span class="a" id="b">hello world</span>
</p>
</body>
</html>
image
在这里面ID类的优先级最高,所以显示为紫色
使用
!important
span{
color:red !important
}
image
使用了!important后red的优先级最高
