目录
1.基本选择器
1.1 选择器内容
id选择器 ( #id )
元素选择器 ( element )
class选择器 ( .class )
通配符 ( * )
1.2 代码展示
<!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>Document</title>
<style>
p{
color:red;
}
#name{
color: blue;
}
.xingming{
color:green;
}
</style>
</head>
<body>
<p id='name'>hello chen</p>
<p class='xingming'>hello chen</p>
<p>hello chen</p>
<p>hello chen</p>
</body>
</html>
结果展示:
hello chen
hello chen
hello chen
补充:
当基本选择器都在一个元素标签上时:
class选择器>id选择器>标签选择器 (*通配符的优先级最低)
2.包含选择器(复合选择器)
2.1 选择器内容
- 后代选择器 element element
- 子代选择器 element>element
- 分组选择器(并集选择器)element,element
- 相邻兄弟选择器 element+element
- 通用兄弟选择器 element~element
2.2 代码展示
2.2.1 后代选择器
<!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>Document</title>
<style>
ul li{
color:cornflowerblue;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</body>
</html>
结果展示:
2.2.2 子代选择器
<!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>Document</title>
<style>
div p{
color:teal;
}
</style>
</head>
<body>
<div>
<p>hello world</p>
<p>hello world</p>
</div>
<p>hello world</p>
</body>
</html>
结果展示:
hello world
hello world
hello world
2.2.3 分组选择器
<!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>Document</title>
<style>
div,p{
color:red;
}
</style>
</head>
<body>
<div>nihao chen</div>
<p>nihao chen</p>
</body>
</html>
结果展示:
nihao
nihao
2.2.4 相邻兄弟选择器
<!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>Document</title>
<style>
div+p{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>nihao chen</div>
<p>nihao chen</p>
</body>
</html>
结果展示:
nihao
nihao
2.2.5 通用兄弟选择器
<!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>Document</title>
<style>
div~p{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>nihao chen</div>
<p>nihao chen</p>
<p>nihaoya</p>
<p>nihaoya</p>
</body>
</html>
结果展示:
nihao
nihao
nihaoya
nihaoya
3.属性选择器
3.1选择器内容
类型 | 用法 、格式 |
[attribute=value] | 匹配带有指定值属性的元素 |
[attribute^=value] | 匹配属性值中且以value开头的元素 |
[attribute$=value] | 匹配属性值中且以value结尾的元素。 |
[attribute*=value] | 匹配属性值包含指定值的每个元素。 |
[attribute~=value] | 匹配属性值中包含指定单词的元素。 |
[attribute|=value] | 匹配带有以指定值开头的属性值的元素。(该值必须是整个单词 , 比如 id="div",或者后面跟着连字符,比如 id="div-tt"。 ) |
3.2代码展示
3.2.1 [attribute=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: brown;
}
[title=one]{
background-color: black;
}
</style>
</head>
<body>
<div title='one'></div>
<div></div>
</body>
</html>
结果展示:
3.2.2 [attribute^=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: cadetblue;
}
[title^=hello]{
background-color: brown;
}
</style>
</head>
<body>
<div title='hello'></div>
<div title='helloworld'></div>
<div title='heiworld'></div>
</body>
</html>
结果展示:
3.2.3 [attribute$=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: rgb(69, 112, 79);
}
[title$=world]{
background-color: rgb(79, 161, 185);
}
</style>
</head>
<body>
<div title='hello'></div>
<div title='helloworld'></div>
<div title='heiworld'></div>
</body>
</html>
结果展示:
3.2.4 [attribute*=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: rgb(179, 104, 126);
}
[title*=well]{
background-color: rgb(149, 170, 177);
}
</style>
</head>
<body>
<div title='well'></div>
<div title='welcome'></div>
<div title='wel'></div>
</body>
</html>
结果展示:
3.2.5 [attribute~=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: rgb(83, 49, 60);
}
[title~=wel]{
background-color: rgb(51, 94, 60);
}
</style>
</head>
<body>
<div title='well'></div>
<div title='welcome'></div>
<div title='wel come'></div>
</body>
</html>
结果展示:
3.2.6 [attribute|=value]
<!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>Document</title>
<style>
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: rgb(71, 87, 175);
}
[title|=say]{
background-color: rgb(66, 38, 57);
}
</style>
</head>
<body>
<div title='say hi'></div>
<div title='say-hello'></div>
<div title='saybye'></div>
<div title='say'></div>
</body>
</html>
结果展示:
4.伪元素选择器
4.1选择器内容
选择器标签 | 作用 |
::before | 元素前的一个元素 |
:before | 元素前的一个元素(没有content:" ") |
::after | 元素后的一个元素 |
:after | 元素后的一个元素(没有content:" ") |
::selection | 选择用户选择的元素部 |
5.伪类选择器
选择器标签 | 作用 |
---|---|
:link | 选取未被访问的链接 |
:visited | 选取已被访问的链接 |
:hover | 选取鼠标指针浮动在上面的元素 |
:active | 选择已被激活的链接 |
:focus | 选取获得焦点的元素 |
:root | 文档的根元素 |
6.样式链接的方式
行内样式 |
内嵌样式 |
外链样式 |
导入样式 |
6.1 行内样式
<div style="color:red"></div>
6.2 内嵌样式
<style>
div{
color:green;
}
</style>
6.3 外链样式
<link rel="stylesheet" href='1.css'>
6.4 导入样式
<style type='text/css'>
@import url("1.css");
</style>