1、CSS选择器常见的有几种?
- 基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素(性能会比较差，用的少) |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含(不是等于)特定类的元素 |
| element | 标签选择器 |
eg:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基础选择器测试</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin:50px auto 0 auto;
}
.nav {
color: red;
border: 1px solid green;
margin-top: 50px;
text-align: center;
}
p {
margin-top: 50px;
color: pink;
}
</style>
<div id="container" >
<div class="nav">
我是nav
</div>
<p>
我段落内容
</p>
</div>
<body>
</body>
</html>
效果：
Paste_Image.png
- 组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素 |
| element#id | id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素 |
eg:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>组合选择器测试</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
width: 500px;
height: 100%;
border: 1px solid #ccc;
margin:50px auto 0 auto;
}
.nav,p {
color: red;
border: 1px solid green;
margin-top: 50px;
text-align: center;
}
#container .text{
font-size: 18px;
color: #0000ff;
}
#container > .sub{
font-size: 18px;
color: rosybrown;
margin-bottom: 50px;
}
#container + .relative-child{
width: 500px;
margin:100px auto 0 auto;
font-size: 28px;
background-color: #ff00ff;
}
#container ~ .relative-bor-child{
width: 500px;
margin:100px auto 0 auto;
font-size: 28px;
background-color: #006600;
}
.class1.class2 {
color: #00ffff;
}
#footer.class3 {
color: #440FFE;
}
</style>
<div id="container" >
<div class="nav">
|E,F |多元素选择器，用,分隔，同时匹配元素E或元素F|
<div class="text">|E F|后代选择器，用空格分隔，匹配E元素所有的**后代**（不只是子元素、子元素向下递归）元素F|</div>
<div class="sub">sub text1</div>
<div class="relative-child">relative-child text1</div>
</div>
<div class="sub">|E>F|子元素选择器，用>分隔，匹配E元素的所有**直接子元素**|</div>
<div class="text">|E F|后代选择器，用空格分隔，匹配E元素所有的**后代**（不只是子元素、子元素向下递归）元素F|</div>
<p>
|E,F |多元素选择器，用,分隔，同时匹配元素E或元素F|
</p>
<div class="relative-child">relative-child text1</div>
<div class="relative-child">relative-child text1</div>
<div class="sub">|E>F|子元素选择器，用>分隔，匹配E元素的所有**直接子元素**|</div>
<div class="class1 class2">.class1.class2选择器</div>
<div id="footer" class="class3">
element#id选择器
</div>
</div>
<div class="relative-child">|E+F|直接相邻选择器，匹配E元素之后的相邻的同级元素F|</div>
<div class="relative-bor-child" style="width: 500px;margin:0px auto 0 auto;">|E~F|普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）|</div>
<div class="relative-bor-child" style="width: 500px;margin:0px auto 0 auto;">|E~F|普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）|</div>
<body>
</body>
</html>
效果：
Paste_Image.png
- 属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr ^= value] | 匹配属性attr的值以value开头的元素 |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 |
| E[attr *= value] | 匹配属性attr的值包含value的元素 |
eg:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器测试</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
width: 500px;
border: 1px solid #ccc;
margin:50px auto 0 auto;
}
input[type="text"]{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
font-family: Verdana,Arial;
}
input[type="button"]{
width: 220px;
margin-left: 35px;
display: block;
font-family: Verdana,Arial;
font-size: 18px;
}
input[data-class~="class1"]{
width: 320px;
margin-left: 35px;
display: block;
font-family: Verdana,Arial;
font-size: 28px;
}
input[data-class^="tclass"]{
width: 420px;
margin-left: 35px;
display: block;
font-family: Verdana,Arial;
font-size: 18px;
}
input[data-class$="tt"]{
width: 440px;
margin-left: 35px;
display: block;
font-family: Verdana,Arial;
font-size: 18px;
}
input[data-class*="clsasst"]{
width: 240px;
margin-left: 35px;
display: block;
font-family: Verdana,Arial;
font-size: 18px;
}
</style>
<div id="container" >
<input type="text" value="E[attr = value]">
<input type="text" value="E[attr = value]">
<input type="button" value="E[attr = value]">
<input type="button" value="E[attr = value]">
<br>
<input type="text" data-class="class1 class2" value="E[attr ~= value]">
<input type="text" data-class="class2 class1" value="E[attr ~= value]">
<br>
<input type="text" data-class="tclass1 class2" value="E[attr ^= value]">
<input type="text" data-class="tclsasstt" value="E[attr $= value]">
<input type="text" data-class="tclsasstt2" value="E[attr $= value]">
</div>
<body>
</body>
</html>
效果：
Paste_Image.png
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
eg:
<style>
.div1{
width: 600px;
margin: 0 auto;
}
.div1 p:first-of-type
{
background:#ff0000;
}
.div1 p:last-of-type{
font-weight: bold;
}
.btn{
width: 60px;
height: 20px;
text-align: center;
line-height: 20px;
border: 1px solid blue;
border-radius: 5px;
cursor: pointer;
}
.btn:hover{
background: blue;
color: white;
}
.btn:active{
background: lightblue;
}
</style>
<div class="div1">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<div class="btn">按钮</div>
</div>
效果：
Paste_Image.png
- 伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
eg:
<style>
ul, li{
list-style: none;
}
a{
color: black;
line-height: 20px;
text-decoration: none;
}
a::before{
content: '\f04';
color: red;
}
a::after{
content: ' hello';
color: green;
}
</style>
<ul class="list">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
效果：
Paste_Image.png
2、选择器的优先级是怎样的?
从高到低分别是
- 在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
- style内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高，越接近下层，则越优先
3、class 和 id 的使用场景?
class标签比较灵活，可以单独使用，也可以和其它元素组合使用，比id选择器更加方便些，所以实际开发中用的更频繁。
id选择器主要用于唯一重要的元素，以及外部结构区块。一般html文档会有很多区块，其中的主要结构区块都是用id选择器，结构语义化更清晰。
4、使用CSS选择器时为什么要划定适当的命名空间？
- 为了防止css之间发生冲突和覆盖问题，导致页面混乱。
- 代码易于维护和扩展
5、以下选择器分别是什么意思?
/* 选择id="header"的元素 */
#header{
}
/* 选择class="header"的元素 */
.header{
}
/* 选择祖先元素为class="header"的class="logo"元素 */
.header .logo{
}
/* 选择class中同时含有header和mobile的元素 */
.header.mobile{
}
/* 选择祖先元素为class="header"的p元素和选择祖先为class="header"的h3元素 */
.header p, .header h3{
}
/*
选择祖先为class="header" 且直接父元素为class="nav"的所有li元素
*/
#header .nav>li{
}
/* 选择祖先为class="header"的a元素的伪类:hover */
#header a:hover{
}
6、列出你知道的伪类选择器
- :visited
- :hover
- :link
- :active
- :focus
- :enabled
- :disabled
- :checked
- :root
- :first-of-type
- :last-of-type
- :nth-last-of-type
- :nth-of-type()
- :first-child
- :last-child
- :only-child
- :nth-child()
- :empty
7、:first-child和:first-of-type的作用和区别
-
:first-child匹配的是某父元素的第一个子元素，是html结构上的第一个子元素,嵌套关系下的第一个子元素，也是会被匹配。 -
:first-of-type匹配的是某父元素下相同类型子元素中的第一个，不限制是第一个子元素，只要是该类型元素的第一个就可以。
eg:
<style>
.content {
width: 600px;
margin: 0 auto;
}
ul, li{
list-style: none;
}
a{
color: black;
line-height: 20px;
text-decoration: none;
}
.class1:first-child{
color: #ffffff;
font-size: 39px;
}
.class1:first-of-type{
background-color: #00ffff;
}
</style>
<div class="content">
<p class="class1">aa</p>
<ul class="list">
<li class="class1">链接1</li>
<li><a href="#">链接2</a></li>
<li class="class1"><a href="#">链接3</a></li>
</ul>
<p class="class1">aa</p>
<h3 class="class1">bb</h3>
<h3 class="class1">ccc</h3>
<span class="class1">aa</span>
</div>
效果：
Paste_Image.png
8、运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
-
蓝色背景：样式里面设置了
first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。 -
红色字：
first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色。
9、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center作用是使元素水平居中
作用在块级元素上，让块级元素内部的行内元素（如文本、input、图片）水平居中
10、如果遇到一个属性想知道兼容性，在哪查看?
到Can I use查看
e:
Paste_Image.png
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
