: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. 在python3 encode和decode 的使用

    说这个问题之前必须的介绍关于编码的在我们这的发展: 首先电脑能识别的最初的语言是二进制 ---010101这种 然后在是我们知道的ASSIC码 再过了就是 gb2312----------->g ...

  2. Java基础知识之设计模式--单例模式

    Java设计模式--单例模式 声明:本文根据慕课网汤小洋老师的精品课程整理来的:慕课网 什么是设计模式(Design Pattern)? 设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设 ...

  3. 西门子PLC在自动浇灌系统中的应用

    西门子PLC在自动浇灌系统中的应用(鸿控整理) 2020-02-07 22:50:48 1 自动浇灌系统简介 系统采用自行研制的湿度传感器监测土壤的湿度情况,当土壤湿度低于所要求的值后,自动开启水泵电 ...

  4. vue-particles做背景，鼠标动画粒子连线填坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点, ...

  5. Nginx之keepalived高可用工具

    1.创建两台虚拟机,分别为主机和从机,区别两台虚拟机的IP地址 2. 将keepalived上传到linux系统当中 3. cd /usr/local目录 4. tar -zxvf keepalive ...

  6. 第三次作业：使用Packet Tracer分析TCP连接的建立与释放过程

    0 个人信息 张樱姿 201821121038 计算1812 1 实验目的 使用路由器连接不同的网络 使用命令行操作路由器 通过抓取HTTP报文,分析TCP连接建立的过程 2 实验内容 使用Packe ...

  7. 实验1: Cisco路由器基础配置

    实验 1:  Cisco路由器基础配置 1.    路由器的运行模式:Router>    用户模式,通常用来查看统计信息,但不能修改路由器的设置.Router#    特许模式,可以查看并修改 ...

  8. Spring使用外部属性文件

    一.在 Spring Config 文件中配置 Bean 时,有时候需要在 Bean 的配置里添加 系统部署的细节信息, 如文件路径,数据源配置信息.而这些部署细节实际上需要在配置文件外部来定义. 二 ...

  9. 【WPF学习】第三十九章 理解形状

    在WPF用户界面中,绘制2D图形内容的最简单方法是使用形状(shape)——专门用于表示简单的直线.椭圆.矩形以及多变形的一些类.从技术角度看,形状就是所谓的绘图图元(primitive).可组合这些 ...

  10. UVA1623 Enter The Dragon (贪心)

    题意: m个坑,n天,起初每个坑都是满的,每天至多有一个坑会下雨,下雨就会满,满了再下就输出no. 在没有雨的时候可以安排龙来喝水,把坑喝空,可行的话输出龙喝水的方案 思路: 边读入边操作,set保存 ...