更多选择器示例参考：https://www.w3school.com.cn/cssref/css_selectors.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<!--
1.样式可以规定在单个的 HTML 元素中
<b style="color: blueviolet; background-color: blue">样式在单个的html元素中</b>
2.在 HTML 页的头元素中(本例)
3.在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表
1.link方式导入外部css文件
<link type="text/css" rel="stylesheet" href="css/my.css">
2.import导入(不推荐)
<style type="text/css">
@import url("css/my.css");
</style>
-->
<style type="text/css">
/*通配符选择器*/
* {
color: cadetblue;
}
/*id选择器*/
/*(选择 id="Id_1" 的标签)*/
#Id_1 {
color: blue;
}
/*(选择 id="Id_1" 或 id="Id_2" 的标签)*/
#Id_1, #Id_2 {
background-color: green;
}
/*----------------(元素/类型)选择器------------------*/
strong {
color: green;
}
big, small {
color: red;
}
/*--------------------类选择器--------------------*/
/*所有包含class5的*/
.class5 {
background-color: blueviolet;
}
/*包含class2 或 class3*/
.class2, .class3 {
color: blue;
}
/*同时包含class4和class5*/
.class4.class5 {
color: red;
}
/*em元素包含class6的*/
em.class6 {
background-color: green;
}
/*---------------------属性选择器---------------
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
*/
b[title="abc"] {
color: cadetblue;
}
/*--------------------后代选择器------------------------*/
/*所有后代*/
ul ol {
list-style-type: decimal;
}
/*所有后代*/
ul li {
background-color: green;
width: 50px;
}
/*直接后代*/
ul > li {
color: blue;
}
</style>
</head>
<body>
<b style="color: blueviolet; background-color: blue">样式在单个的html元素中</b>
<hr/>
<p>通配符选择器测试1</p>
<p>通配符选择器测试2</p>
<hr/>
<pre id="Id_1">Id_1选择器</pre>
<b id="Id_2">Id_2选择器</b>
<hr/>
<strong>strong元素选择器</strong><br/>
<big>big元素选择器</big><br/>
<small>small元素选择器</small><br/>
<hr/>
<b class="class1 class2">类选择器class1 class2</b><br/>
<b class="class2 class3 ">类选择器class2 class3</b><br/>
<b class="class4 class5">类选择器class4 class5</b><br/>
<em class="class6">类选择器class6</em>
<hr/>
<b title="abc">属性选择器</b><br/>
<hr/>
<ul>
<li title="hb">河北</li>
<ol>
<li title="bd">保定</li>
<li title="cd">承德</li>
<li title="cz">沧州</li>
</ol>
<li title="hn">河南</li>
<ol>
<li title="zz">郑州</li>
<li title="ny">南阳</li>
</ol>
<li title="ln">辽宁</li>
</ul>
</body>
</html>
标签：color,attribute,元素,Id,选择器,css From： https://www.cnblogs.com/ruber/p/17573809.html