【CSS】选择器

最新推荐文章于 2024-05-09 13:14:11 发布

哈哈n

最新推荐文章于 2024-05-09 13:14:11 发布

阅读量168

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/lanwuying/article/details/103822143

版权

CSS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS选择器|菜鸟教程

伪类&伪元素

在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以 : 开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；
在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

伪类

① 利用伪类选择元素是基于：当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。
② 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
③ 由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素

① 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
② 实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面…这种普通的选择器无法完成的工作。
③ 它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

伪类伪元素一览

另外若有新增的，后续再补充…

伪元素

伪类的语法：

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

`first-child`与`first-of-type`的区别

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` 伪类

参考：
CSS 巧用 before after 伪类
 ::before ::after CSS3中的伪类和伪元素

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

<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. 两个图标之间加上分隔符

<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： 创建或重置一个或多个计数器

<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. 简单几何图形

<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;
}

其他用法自行搜索练习…

哈哈n

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】选择器

CSS选择器|菜鸟教程伪类&伪元素在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以 : 开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。伪类① 利用伪类...
复制链接

扫一扫