css3浏览器前缀、css3高级选择器:first-of-type,:last-of-type,:nth-child(n),::first-letter,first-line

最新推荐文章于 2024-05-26 14:56:34 发布

Cc.＇沐艿伊℡

最新推荐文章于 2024-05-26 14:56:34 发布

阅读量540

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/92438625

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

1.浏览器前缀

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge

后

2.高级选择器

结构(位置)伪类选择器（CSS3)

p:first-of-type  : 返回其父元素指定的首个p子元素//不一定是第一个子元素,出现的第一个p元素即可

p:last-of-type  : 返回其父元素指定的最后一个p子元素//不一定是最后一个子元素,出现的最后一个p元素即可

p:first-child  : 返回其父元素的首个子元素p//必须是父元素中第一个子元素为p

p:last-child  : 返回其父元素的最后一个子元素p//必须是父元素中最后一个子元素为p

p:nth-child(n) : 返回其父元素的第n个p元素//必须是父元素中第n个子元素为p

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。相当于在你所要创建的那个盒子里面的内容最前面加span,即以下案例中div里面内容的最前面

div::before {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

“:” 与 “::” 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

属性选择器

选取标签带有某些特殊属性的选择器我们称为属性选择器
/* 获取到拥有该属性的元素 /
div[class^=font] { / class^=font 表示 font 开始位置就行了 /
color: pink;
}
div[class $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotser] { /* class$ =footer 表示 footer 结束位置就行了 /
color: skyblue;
}
div[class=tao] { / class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}

以上全部效果均可以由下列代码实现并且验证,如果需要验证,给对应的样式解开注释即可

<html>
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <style>
        结构(位置)伪类选择器
        /*p:first-of-type{background-color:red;}*/
        /*p:last-of-type{background-color:green;}*/
        /*p:last-child {*/
        /*border: 3px solid black;*/
        /*}*/

        /*p:nth-child(2){background-color:blue;}*/
        /*p{*/
            /*float: left;*/
        /*}*/
        伪元素选择器（CSS3)
        /*p::before{*/
        /*content:"文字";*/
        /*border:3px solid yellow;*/
        /*color:red;*/
        /*font-size: 24px;*/
        /*background-image: url("images/1.jpg");*/
        /*display: inline-block;*/
        /*width:20px;*/
        /*height: 20px;*/
        /*}*/
        /*p::after{*/
            /*content:"";*/
            /*display: block;*/
            /*height: 0;*/
            /*visibility: hidden;*/
            /*clear: both;*/
        /*}*/
        /*p::first-letter{*/
        /*font-size: 30px;*/
        /*background-color: red;*/
        /*}*/
        /*改变选中文本的样式*/
        /*p::selection{*/
        /*background-color: pink;*/
        /*color:white;*/
        /*}*/
         属性选择器
        /*选出所有 带有 class 属性的*/
        /*p[class] {*/
        /*background-color: pink;*/
        /*}*/

        /*选出 class = demo 的*/
        /*p[class="demo"] {*/
        /*background-color: pink;*/
        /*}*/

        /* 选出demo 开头的 标签*/
        /*p[class^="demo"] {*/
            /*background-color: purple;*/
        /*}*/

        /*选出demo 结尾的 标签*/
        /*p[class$="demo"] {*/
        /*background-color: purple;*/
        /*}*/

        /*选出包含demo的 标签*/
        /*p[class*="demo"] {*/
            /*background-color: purple;*/
        /*}*/

        /*input[type="text"]{*/
            /*background-color: pink;*/
        /*}*/

    </style>
</head>
<body>
    <div>
        <p class="test-p">第一个</p>
        <p>第二个</p>
    </div>
    <p  class="pp-demo">第三个</p>
    <h3>
        <p>第四个</p>
        <p>第五个</p>
    </h3>
    <p class="demo-p">第六个</p>
    <a href="">
        <p>第七个</p>
        <p  class="demo">第八个</p>
        <span>第十个</span>
    </a>

</body>
</html>

Cc.＇沐艿伊℡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3浏览器前缀、css3高级选择器:first-of-type,:last-of-type,:nth-child(n),::first-letter,first-line

1.浏览器前缀浏览器前缀浏览器-webkit-Google Chrome, Safari, Android Browser-moz-Firefox-o-Opera-ms-Internet Explorer, Edge后2.高级选择器结构(位置)伪类选择器（CSS3)p:first-of-type : 返回其父元素指定的首个p子元素//不...
复制链接

扫一扫

专栏目录