开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS3——CSS3 新增选择器

简介: CSS3——CSS3 新增选择器
+关注继续查看

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


  • :first-child :选取属于其父元素的首个子元素的指定选择器


  • :last-child :选取属于其父元素的最后一个子元素的指定选择器


  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型


  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。


  • n 可以是数字、关键词或公式


li:first-child { /*  选择第一个孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一个孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
            }


案例


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*a:hover  鼠标经过a链接的时候 */
    ul li {
        list-style: none;
    }
    ul li:first-child {
        background-color: pink;
    }
    ul li:last-child {
        background-color: pink;
    }
    li:nth-child(3) {  /*选择第3个 */
        background-color: purple;
    }

    li:nth-child(even) {  /* even 选择所有的偶数*/
        background-color: pink;
    }
    li:nth-child(odd) { /*  odd 选择所有的奇数*/
        background-color: purple;
    }

    li:nth-child(2n) { /* n = 0  1  2 3 4 5   2n   0 2 4 6 8 10...开始 2n 类似于even*/
        background-color: pink;
    }
    

    li:nth-child(2n+1) {  /*奇数  odd*/
        background-color: pink;
    }

    li:nth-child(4n) {  /* 4.8.12 */
        background-color: blue;
    }
    </style>
</head>
<body>
    <ul>
        <li>我的错热风</li>
        <li>我的错热风</li>
        <li>我的错热风</li>
        <li>我的错热风</li>
        <li>爱上对方过后就哭了</li>
        <li>爱上对方过后就哭了</li>
        <li>爱上对方过后就哭了</li>
        <li>爱上对方过后就哭了</li>
        <li>爱上对方过后就哭了</li>
    </ul>
</body>
</html>


属性选择器


(其中有正则的知识,在这先了解怎么用就行了,后面的文章会学)


选取标签带有某些特殊属性的选择器 我们成为属性选择器


  • class^=font 表示 font 开始位置就行了


  • class$=footer 表示 footer 结束位置就行了


  • class*=tao *= 表示tao 在任意位置都可以


/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }


案例


image


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div[class] {  /*选出所有 带有 class 属性的*/
        background-color: pink;
      }
      div[class=demo] { /* 选出 class = demo 的*/
        background-color: yellow;
      }

      div[class^=test] {  /*选出test 开头的 标签*/
        background-color: purple;
      }
      div[class$=test] {  /*选出test 结束的 标签  ^    $  */
        background-color: red;
      }

    </style>
</head>
<body>
    <div class="demo">属性选择器例子</div>
    <div>属性选择器例子</div>
    <div>属性选择器例子</div>
    <div>属性选择器例子</div>
    <div>属性选择器例子</div>
    <div>属性选择器例子</div>
    <div class="firsttest">属性选择器例子</div>
    <div class="test">属性选择器例子</div>
    <div class="test1">属性选择器例子</div>
    <div class="test2">属性选择器例子</div>
    <div class="test3">属性选择器例子</div>

</body>
</html>


伪元素选择器(CSS3)


  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)


  1. E::first-line 文本第一行;


  1. E::selection 可改变选中文本的样式;


p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}


4. E::before和E::after


在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。


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


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


案例


image


代码分析


image


源代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div::before {  /*必须带一个属性  content 伪元素 其实这个 before 是个盒子*/
        /* 这个盒子是行内的盒子  可以转换*/
        content: "我";
        width: 200px;
        height: 200px;
        background-color: pink;
        display: block;
    }
    div::after {
        content: "18岁";
    }
    </style>
</head>
<body>
    <div>今年</div>
</body>
</html>


: 伪类与 :: 伪元素


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


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


注意


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


案例


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p::first-letter { /* 选择第一个字*/
        font-size: 100px;
    }
    .pp::first-line {  /*第一行*/
        color: red;
    }
    p::selection {  /*选择文字时候的状态*/
        background-color: pink;
        color: yellow;
    }
    </style>
</head>
<body>
    <p class="pp">
        中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 
    </p>
    <p>
    p北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!</p>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
47 0
css3新增了选择器,还有人不知道吗?
前言 CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素,你还不知道吗? 属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。
20 0
CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1)   一.通用兄弟选择器:                         24:E ~ F,匹配任何E元素之后的同级F元素。 div ~ p{ background-color:#00FF00; } 二.属性选择器:                         25:E[att ^= val],匹配属性att的值以”val“开头的元素。
968 0
CSS_选择器
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54696007 类选择器 class 属性规定元素的类名(classname) 类选择器以一个点号显示 .center {text-align: center} class类似一个标记。
755 0
CSS选择器
基本规则 每CSS规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性-值对. 1.元素选择器 元素是最基本的选择器, h1,p,a都可以直接做为选择器,甚至是html本身.
428 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载