【CSS】选择器
2020-01-03 本文已影响0人
前端菜篮子
image.png
伪类&伪元素
- 在
CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以:开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after； - 在
CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。
伪类
- ① 利用伪类选择元素是基于：当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的
id、class、属性等静态的标志。 - ② 由于状态是动态变化的，所以
一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 - ③ 由此可以看出，它的功能和
class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪元素
- ① 与伪类针对特殊状态的元素不同的是，伪元素是对
元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。 - ② 实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面...这种普通的选择器无法完成的工作。
- ③ 它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪类伪元素一览
另外若有新增的，后续再补充......
image.png
伪元素
image.png
伪类的语法：
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
first-child与first-of-type的区别
image.png
p:first-child 匹配到的是p元素,
因为p元素是div的第一个子元素；
h1:first-child 匹配不到任何元素，
因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child 匹配不到任何元素，
因为在这里两个span元素都不是div的第一个子元素；
p:first-of-type 匹配到的是p元素,
因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，
因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。
这里div有两个为span的子元素，匹配到的是它们中的第一个。
巧用 before & after 伪类
A. 动态在元素中添加字符串
① 电话号码前加上icon☎，价格前面加上￥......
特殊字符unicode参考这里。
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
.price::before {
content: "¥"
}
</style>
<p class="phoneNumber">12345645654</p>
<p class="price">1800</p>
说明：::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
② 字符串前后加固定字符，如书名《简爱》（引号也一样）
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
<p>简爱</p>
③ 通过attr()/url()/uri() 加content
image.png
<style type="text/css">
a::before{
content: url("https://www.baidu.com/img/logo.gif");
}
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.baidu.com">百度</a>
上述案例配合hover使用更好，鼠标移上的时候再出现链接
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right: -10px; }
B. 两个图标之间加上分隔符
image.png
<style>
.operateIcon:hover {
color: #5cb6ff
}
.operateIcon::after{
content: '';
display: inline-block;
background: #dce1e3;
width: 1px;
height: 10px;
margin: 0 6px;
}
/** 将最后一个图标后的分割符去掉 */
.operateIcon:last-child::after{
display:none;
}
</style>
C. 不改变元素尺寸的边框
在宽度为百分比的元素中，为此元素增加边框，此时会导致元素超过原有的百分比；例如：导航条宽度为文档的 100% ，刚好撑满文档，但是需要在周围增加 1px 的边框
.meun {
width: 100%;
height: 80px;
position: relative;
}
.menu::before {
content: ""
position: absolute;
left: 0;
border-left: 1px solid #ccc;
}
.menu::after {
content: ""
position: absolute;
left: 0;
border-right: 1px solid #ccc;
}
D. 通过css属性计数器counter对Item进行编号
counter-increment： 递增或递减一个或多个计数器
counter-reset： 创建或重置一个或多个计数器
image.png
<style>
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
E. 简单几何图形
image.png
<style>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>
F.清除浮动
清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
G. 实现多图片背景
现在background可以自行多图片背景了
<style>
background:
url(images/scroll_top.jpg) center top no-repeat,
url(images/scroll_bottom.jpg) center bottom no-repeat,
url(images/scroll_middle.jpg) center top repeat-y;
</style>
也可以通过::before和::after 实现
.banner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
opacity: .7;
}
其他用法自行搜索练习......
