目录
1.基本选择器
1.1标签选择器
<style type="text/css">
h2{
color:red;
}
</style>
<body>
<h2>标题1</h2>
</body>1.2ID选择器
<style type="text/css">
#one{
color:red;
}
</style>
<body>
<p id="one">一句话</p>
</body>1.3类选择器
<style type="text/css">
.two{
color:red;
}
</style>
<body>
<p class="two">第二句话</p>
</body>1.4通用选择器（通配符选择器）
<style type="text/css">
*{
color:red;
}
</style>
<body>
<p>第三句话</p>
</body>优先级：id>类>标签>通配符
2.包含选择器
2.1子代选择器
获取的某个标签的第一级子标签 （不影响下一级）
<style type="text/css">
.list>ul{
color: green;
}
</style>
<body>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
</div>
</body>
2.2后代选择器
获取某个标签内的所有子标签
<style type="text/css">
.list li{
color: green;
}
</style>
<body>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</div>
</body>
2.3分组选择器（逗号选择器）
可以给多个标签加上样式（通过，隔开）
<style type="text/css">
h2,.list,#list{
color: blue;
}
</style>
<body>
<h2>标题1</h2>
<p id="list">这是一个段落</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</div>
</body>3.属性选择器
3.1选中某个标签的某个属性
<style type="text/css">
div[title]{
color: red;
}
</style>
<body>
<div title="one">这是一个div</div>
</body>3.2确切的等于
<style type="text/css">
input[type="text"]{
background: pink;
}
</style>
<body>
<input type="text" id="" class="" value="张三">
</body>3.3 某个属性含有某个值
<style type="text/css">
input[type*="e"]{
background: red;
}
</style>
<body>
<input type="text" id="" class="" value="张三">
<input type="email" id="" class="" value="王五">
</body>3.4某个属性以什么开始
<style type="text/css">
input[type^="e"]{
background: green;
}
</style>
<body>
<input type="email" id="" class="" value="王五">
</body>3.5 某个属性以什么结束
<style type="text/css">
input[type$="rl"]{
background: blue;
}
</style>
<body>
<input type="url" id="" class="" value="李四">
</body>3.6表示下一个标签
<style type="text/css">
.msg+{
color:red;
}
</style>
<body>
<div class="msg">这是第二个div</div>
<div title="这是一个标题">这是第三个div</div>
</body>3.7 属性名称等于某个值
<style type="text/css">
[title="这是一个标题"]{
color: yellow;
}
</style>
<body>
<div title="这是一个标题">这是第三个div</div>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
div[title]{
color: red;
}
input[type="text"]{
background: pink;
}
input[type*="e"]{
background: red;
}
input[type^="e"]{
background: green;
}
input[type$="rl"]{
background: blue;
}
.msg + {
color: red;
}
[title="这是一个标题"]{
color: yellow;
}
</style>
</head>
<body>
<div title="one">这是一个div</div>
<p class="two">这是一个段落</p>
<input type="text" id="" class="" value="张三">
<input type="url" id="" class="" value="李四">
<input type="email" id="" class="" value="王五">
<div class="msg">这是第二个div</div>
<div title="这是一个标题">这是第三个div</div>
<p id="msg1">这是第二个段落</p>
</body>
</html>4.伪类选择器
|
:link
| 超链接点击之前的样式 |
| :visited | 链接被访问之后 |
| :hover | 悬停，鼠标放到标签上的样式 |
| :active | 被激活的时候，鼠标点击的时候，但是不松手的时候 |
| :focus | 某个标签获得焦点的时候 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/* 让超链接点击之前是红色 */
a:link{ color: red; }
/* 让超链接点击之后是绿色 */
a:visited{ color: green; }
/* 让鼠标悬停的时，放到标签上变成粉色 */
a:hover{ color: pink; }
/* 让鼠标点击链接不松手的时候橙色 */
a:active{ color: orange; }
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
</body>
</html>顺序是一定的，不可以改变，他们的顺序 :link :visited :hover :active
5.伪元素选择器
|
:after
| :before | CSS2提供的 |
| ::after | ::before | CSS3提供的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p::before{
content: "zhangsan";
color: red;
}
p::after{
content: "lisi";
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
如果要使用before和after，一定要加上content（内容）属性
2187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
