1. id选择器
#elem{ } id=“elem”
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{background:red;}
#div2{background:blue;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<div id="div2">这是另一个块</div>
</body>
</html>
注:
1.在一个页面中,ID值是唯一的,出现多次是不符合规范的。
2.命名规范,字母— _ 数字(命名的第一位不能是数字)。
3.命名方式,驼峰式(如:searchButtom),下划线式,短线(中划线)式。
2. class选择器
.elem{ } class=“elem”
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{background:red;}
.content{font-size:30px;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>\
<p class="box">这是一个段落</p>
</body>
</html>
注:
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
4.标签+类的写法(p.box)
3.标签选择器(TAG选择器)
div{ }
<div>
</div>
使用的场景:
1.去掉某些标签的默认样式。
2.复杂的选择器中,如:层次选择器。
4.群组选择器(分组选择器)
CSS:div,p,span{}
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div, #text, .title{backgroung:red;}
</style>
</head>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
</body>
</html>
注:可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。
5.通配选择器
*{ }(包含所有的标签)
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ border:1px red solid;}
</style>
</head>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
</body>
</html>
注:尽量避免使用统配选择器。
使用场景:去掉所有标签的默认样式。
6.层次选择器
代码示例如下:
1.后代 M N { }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#list li {border:1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
2.父子 M > N {}
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#list > li {border:1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
3.兄弟 M ~ N {}
当前M下的所有兄弟N标签
4.相邻 M + N {} 当前M下面相邻的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div + h2 {backgroung:red;}
</style>
</head>
<body>
<div>这是一个段落</div>
<h2>这是一个标题</h2>
</body>
</html>
7.属性选择器
M[ attr ] {}
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
<div>[class] {background:red;}
</style>
</head>
<body>
<div>aaaaa</div>
<div class="box">bbbbb</div>
<div class="search">cccc</div>//带有class属性
</body>
</html>
注: 1. *=:部分匹配(只要search出现就可以选中)
div[class*=search]{background:red;}
<div class="search">cccc</div>
<div class="search-bottom">cccc</div>
//注:仅为关键代码示例
- = :完全匹配
- ^ = : 起始匹配
div[class^=search]{background:red;}
<div class="search">cccc</div>
<div class="search-bottom">cccc</div>
<div class="bottom-search">cccc</div>
//注:只有前两个块变为红色
仅为关键代码示例
- $ = : 结束匹配
- [ ][ ][ ]: 组合匹配*
PS:除过上述的选择器,还有伪类选择器,这里的相关知识点较多,将会另外写一篇博客介绍。