1.css的选择器及其介绍
ID选择器:id属性的特点就是唯一不可重复的
元素选择器:元素选择器是通过元素名称来定位页面元素
类(class)选择器:
属性选择器
2.基于关系的选择器
选择器 | 选择的元素 |
---|---|
A E | 元素A的任一后代元素E(后代节点指A的子节点,子节点的子节点,以此类推) 祖先元素和后代元素 |
A > E | 元素A的任一子元素E(也就是直系后代) 父元素和子元素 |
B + E | 元素B的任一下一个兄弟元素E 兄弟元素 |
后代选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
span{
background-color:lightblue;
}
div span{
background-color:lightcoral;
}
</style>
</head>
<body>
<div>
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<span>Span 3.</span>
</body>
</html>
效果:
相邻兄弟选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
#one + li{
color: lightcoral;
}
</style>
</head>
<body>
<ul>
<li id="one">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
效果:
3.伪类
伪类 | 描述 |
---|---|
:link | 尚未被访问的链接添加样式 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式 |
:active | 向被激活的元素添加样式 |
:visited | 向已被访问的链接添加样式 |
伪类用法的特点:
所有的伪类前面都会加一个冒号
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
a:link{
color:lightblue;
}
a:hover{
color:lightcoral;
}
a:active{
color:lightgreen;
}
a:visited{
color:lightgray;
}
</style>
</head>
<body>
<a href="#">慕课网 imooc.com</a>
</body>
</html>
4.伪元素
::before | 会为当前元素创建一个子元素作为伪元素。 |
---|---|
::after | 用来匹配已选中元素的一个虚拟的最后子元素。 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
q::before{
content: "<<";
color: lightgreen;
}
q::after{
content: ">>";
color:lightcoral;
}
</style>
</head>
<body>
<q>一些引用</q>, 他说, <q>比没有好。</q>.
</body>
</html>
效果:
注意事项:
伪元素用法前面加两个冒号
伪类用法前面加一个冒号
5.选择器的优先级别
元素选择器和伪元素的级别最低
其次是类选择器,属性选择器和伪类
ID选择器是选择器中级别最高的
内联样式总会覆盖外部样式表的任何形式样式
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
p{
color:lightblue !important;
}
.myclass{
color:lightgreen;
}
#p{
color: lightcoral;
}
</style>
</head>
<body>
<p id="p" class="myclass">这是一个段落内容.</p>
</body>
</html>
总结:
内联样式的优先级别高于外联样式
外联样式:id选择器级别最高,其次是类选择器,元素选择器和伪类。