:empty 没有子元素（包括文本节点）的元素

:not  否定选择器

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    li:not(:last-of-type){color:red;}

</style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

    </ul>

</body>

</html>

 css权重与权值

行内样式 1000

id选择器 100

类、伪类、属性选择器 10

元素、伪元素 1

通配符 0

权重相同时根据就近原则

伪元素选择器，：：

::first-line 选取文本的第一行，只能用于块级元素

::first-letter  选取文本的第一个字，只能用于块级元素

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p{width:100px;}

    p:first-line{color:red;}

    p:first-letter{background-color: #abcdef;font-size:20px;}

</style>

</head>

<body>

    <p>这是一段用于测试的文本哦~~~~~~~~~~~~~~~~~~~~</p>

</body>

</html>

::before 在指定元素内部的前面插入，且为行级元素

::after 同理

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p:before{

        content:"这是before文本+";

        color:orange;

    }

</style>

</head>

<body>

    <p>文本</p>

</body>

</html>

可以转为块级元素

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p:before{

        content:"这是before文本+";

        color:orange;

        display: block;

    }

</style>

</head>

<body>

    <p>文本</p>

</body>

</html>

::after 常用于清除浮动

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    header{background:#abcdef;}

    .left{float: left;width:50%;}

    .right{float: left;width:50%;}

    header:after{

        display: block;

        content:"";

        clear:both;

    }

</style>

</head>

<body>

    <header>

        <div class="left">左边</div>

        <div class="right">右边</div>

    </header>

</body>

</html>

::selection 选中文本的效果

IE9以上支持，火狐需要加 -moz 前缀

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    p::selection{color:orange;}

</style>

</head>

<body>

    <p>这是一段文本哦</p>

</body>

</html>

CSS3结构类选择器补充的更多相关文章

  1. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  2. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  3. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  4. CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）

    nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li>< ...

  5. CSS3 伪类选择器 :nth-child()

    :nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...

  6. CSS3伪类选择器

    first-line   设置首行样式 first-letter 设置首字母样式 before  在某元素前插入内容并设置内容样式 after 在某元素后插入内容并设置内容样式 <!DOCTYP ...

  7. CSS3伪类选择器 图示

         

  8. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  9. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

随机推荐

  1. 『开源协议』Creative Commons Attribution 3.0 License . 协议的个人理解，并 转载分享 4000个 精美可商用小图标

    为什么会研究 Creative Commons Attribution 3.0 License Creative Commons Attribution 3.0 License 简称 CC3,是 一种 ...

  2. PAT (Advanced Level) Practice 1001-1005

    PAT (Advanced Level) Practice 1001-1005 PAT 计算机程序设计能力考试 甲级 练习题 题库:PTA拼题A官网 背景 这是浙大背景的一个计算机考试 刷刷题练练手 ...

  3. 如何优雅的将Mybatis日志中的Preparing与Parameters转换为可执行SQL

    原文链接 疫情期间大家宅在家里是不是已经快憋出“病”了~~ ​ 公司给开了VPN,手机电脑都能连,手机装上APP测试包,就能干活了,所以walking从2020.02.01入京以来,已经窝在家里11天 ...

  4. Java中正确终止线程的方法

    Thread类中有一个已经废弃的 stop() 方法,它可以终止线程,但由于它不管三七二十一,直接终止线程,所以被废弃了.比如,当线程被停止后还需要进行一些善后操作(如,关闭外部资源),使用这个方法就 ...

  5. 【MySQL 原理分析】之 Trace 分析 order by 的索引原理

    一.背景 昨天早上,交流群有一位同学提出了一个问题.看下图: 我不是大佬,而且当时我自己的想法也只是猜测,所以并没有回复那位同学,只是接下来自己做了一个测试验证一下. 他只简单了说了一句话,就是同样的 ...

  6. gcc 相关总结 动态链接库

    #include < >与#include " " #include < >:直接到系统指定的目录中去找头文件. #include " " ...

  7. Linux学习1-云服务器上搭建禅道项目管理工具

    前言 相信各位测试的小伙伴出去面试总会被问到:测试环境怎么搭建?一个中级测试工程师还是对测试环境一无所知的话,面试官会一脸鄙视的,今天我给大家介绍一下最简单的环境部署-—如何在云服务器部署禅道环境. ...

  8. Golang调用Dll案例

    Golang调用Dll案例 前言 在家办公已经两个多星期了,目前最大的困难就是网络很差.独自一个人用golang开发调用dll的驱动程序.本来就是半桶水的我,还在为等待打开一个页面而磨平了耐心.本想依 ...

  9. 使用Java8 Files类读写文件

    Java8 Files类的newBufferedReader()和newBufferedWriter()方法 这两个方法接受Path类型的参数.Path 类是Java8 NIO中的接口.可以由Path ...

  10. 什么？接口中方法可以不是抽象的「JDK8接口新语法的深度思考」

    先赞后看,养成习惯 文本已收录至GitHub开源仓库 Lu_JavaNodes 码云仓库地址Lu_JavaNodes,包含教程涉及所有思维导图,案例代码和后续讲解视频,欢迎Star增砖添瓦. 前言 在 ...