文章目录
CSS选择器基础选择器ID选择器类选择器标签选择器选择器的优先级分组选择器嵌套选择器
层次选择器后代选择器子元素选择器相邻兄弟选择器通用选择器
伪类选择器属性选择器
CSS选择器
选择器的作用就是根据不同需求，把不同的标签选择出来。
基础选择器
ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myh1 {
color: aqua;
font-size: 20px;
}
#myh2 {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="myh1">CSS选择器之id选择器
</h1>
<h1 id="myh2">CSS选择器之ID选择器
</h1>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.myclass {
color: aquamarine;
font-size: 25px;
font-family: "楷体";
font-style: italic;
font-weight: bolder;
}
</style>
</head>
<body>
<h1 class="myclass">CSS选择器之class选择器
</h1>
<span class="myclass">span标签
</span>
<p class="myclass">
IT之家 7 月 4 日消息 第一财经消息，近日有媒体报道称格力电器在中国移动招标项目弄虚作假，而前者也已作出回应。同时有格力内部员工表示，格力此次事件因相关项目人员在商务合同方面出的问题导致格力被竞争对手举报并失去中标资格。
而有记者调查后发现，相关项目的候选人都举报了对方。同时格力员工对于未中标一事时隔一个月之后再被拿出来炒深感意外，因为官网也会发布供应商负面行为公告。
IT之家了解到，2020 年至 2021 年高压离心式冷水机组集中采购项目因格力电器未中标从而使得美的集团控股子公司拿到了该项目的所有份额。
</p>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {
color: blueviolet;
font-family: "黑体";
font-weight: bold;
}
</style>
</head>
<body>
<h1>标题一、HTML
</h1>
<h1>标题一、CSS
</h1>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
width: 300px;
height: 150px;
}
.divclass {
width: 500px;
height: 200px;
}
div {
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div id="d1" class="divclass" style="background-color: #8A2BE2;">
</div>
</body>
</html>
如果是同一等级的不同选择器，那么哪个选择器更靠近HTML代码，哪个选择器就会覆盖上面的其他选择器的样式。
分组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1,h2,h3 {
color: #0000FF;
}
</style>
</head>
<body>
<h1>标题一
</h1>
<h2>标题二
</h2>
<h3>标题三
</h3>
</body>
</html>
嵌套选择器
p { } : 为所有 p 元素指定一个样式。.marked { } : 为所有 class=“marked” 的元素指定一个样式。.marked p { } : 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked { } : 为所有 class=“marked” 的 p 元素指定一个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
p {
color:blue;
text-align:center;
}
.marked {
background-color:red;
}
.marked p {
color:white;
}
p.marked {
text-decoration:underline;
}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。
</p>
<div class="marked">
<p>这个段落不是蓝色文本。
</p>
</div>
<p>所有class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。
</p>
<p class="marked">带下划线的 p 段落。
</p>
</body>
</html>
层次选择器
后代选择器
后代选择器，又称包含选择器，后代选择器可以选择作为某元素**后代**的元素。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
h1 em {
color: red;
}
ul em {
color: blueviolet;
}
</style>
</head>
<body>
<h1>This is a
<em>important
</em> heading
</h1>
<p>This is a
<em>important
</em> paragraph.
</p>
<ul>
<li>List item 1
<ol>
<li>List item 1-1
</li>
<li>List item 1-2
</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1
</li>
<li>List item
<em>1-3-2
</em></li>
<li>List item 1-3-3
</li>
</ol>
</li>
<li>List item 1-4
</li>
</ol>
</li>
<li>List item 2
</li>
<li>List item 3
</li>
</ul>
</body>
</html>
子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素**子元素**的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style type="text/css">
h1 > strong {
color: red;
}
</style>
</head>
<body>
<h1>This is
<strong>very
</strong> <strong>very
</strong> important.
</h1>
<h1>This is
<em>really
<strong>very
</strong></em> important.
</h1>
</body>
</html>
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li + li {
color: #008080;
}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1
</li>
<li>List item 2
</li>
<li>List item 3
</li>
</ul>
<ol>
<li>List item 1
</li>
<li>List item 2
</li>
<li>List item 3
</li>
</ol>
</div>
</body>
</html>
div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。
上面这个选择器只会把列表中的第二个和第三个列表项变为绿色，第一个列表项不受影响。
通用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div.intro > * {
color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage
</h1>
<div class="intro">
<p id="firstname">My name is Donald.
</p>
<p id="hometown">I live in Duckburg.
</p>
</div>
<p>My best friend is Mickey.
</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: #ff0000;
}
a:visited {
color: #00ff00;
}
a:hover {
color: #0000ff;
}
a:active {
color: #000000;
}
</style>
</head>
<body>
<a href="##">进入一个链接
</a>
</body>
</html>
注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:first-child {
text-indent: 2em;
color: rgb(47, 44, 202);
}
ul>li:first-child {
color: red;
}
ul>li:last-child {
color: green;
}
</style>
</head>
<body>
<p>
2020年湖北高考志愿填报分两个阶段集中填报。所有考生的各类志愿在省招办网上志愿填报系统填报。
</p>
<p>
福建省2020年高考加分和同等条件下优先录取政策如下:
</p>
<p>
今天中午，中国羽毛球队队员林丹在个人社交媒体宣布退出国家队。随后，曾经的对手和好友李宗伟为他献上祝福，并笑称“三缺一很久了”（林丹、李宗伟、陶菲克、盖德合称羽坛四大天王）。
</p>
<ul>
<li>游泳
</li>
<li>健身
</li>
<li>爬山
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style type="text/css">
p:nth-child(2) {
color: red;
}
p:nth-of-type(2) {
color: green;
}
</style>
</head>
<body>
<h1>这是一个标题
</h1>
<p>这是第一个段落。
</p>
<p>这是第二个段落。
</p>
<p>这是第三个段落。
</p>
<p>这是第四个段落。
</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
[title] {
color: blue;
}
</style>
</head>
<body>
<h2>Will apply to:
</h2>
<h1 title="Hello world">Hello world
</h1>
<a title="runoob.com" href="//www.runoob.com/">runoob.com
</a>
<hr>
<h2>Will not apply to:
</h2>
<p>Hello!
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
[target=_blank] {
text-decoration: none;
font-size: 20px;
}
a:hover {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" title="超链接" target="_blank">点击链接
</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
[title~=hello] {
color: teal;
}
</style>
</head>
<body>
<h1 title="hello world">Hello world
</h1>
<p title="student hello">Hello CSS students!
</p>
<p title="student">Hello，Student!
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
[lang|=em] {
color: blueviolet;
}
</style>
</head>
<body>
<p lang="em">Hello!
</p>
<p lang="em-us">Hi!
</p>
<p lang="em-gb">Ello!
</p>
<hr>
<p lang="us">Hi!
</p>
<p lang="no">Hei!
</p>
</body>
</html>
