: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. .net core3.1 web api中使用newtonsoft替换掉默认的json序列化组件

    在微软的文档中,有着较为详细的替换教程 https://docs.microsoft.com/zh-cn/aspnet/core/web-api/advanced/formatting?view=as ...

  2. inode和block的理解

    什么是inode和block? 所谓的inode就是索引节点(index node)的意思,在每一个存储设备被格式化创建文件系统后,所有的文件大致被分为了两部分,分别是inode和block. 其中i ...

  3. Unreal Engine 4 蓝图完全学习教程（四）—— 变量与计算

    Ⅰ.值的基础类型 ①文本.字符串(Text.String):文本类型的值. ②整型.浮点型(Int.Float):数字类型的值. ③布尔型(Bool):表示“真或假”二者选其一的状态. Ⅱ.加法运算 ...

  4. 《考研机试》（一）C/C++基础

    1.setfill/setw使用 2.定义结构体 3.关于字符串读取 4.排序问题:复试不要求一般用:冒泡排序 5.数字和字符之间转换 6.进制转化:10进制转8进制 7.质数判断 8.字符串拷贝函数 ...

  5. re模块 findall()详解

    1. findall() 函数的2种表示形式 import re kk = re.compile(r'\d+') kk.findall('one1two2three3four4') #[1,2,3,4 ...

  6. Codeforces 1156E Special Segments of Permutation(启发式合并)

    题意: 给一个n的排列,求满足a[l]+a[r]=max(l,r)的(l,r)对数,max(l,r)指的是l到r之间的最大a[p] n<=2e5 思路: 先用单调栈处理出每个点能扩展的l[i], ...

  7. 7天用Go动手写/从零实现分布式缓存GeeCache

    1 谈谈分布式缓存 第一次请求时将一些耗时操作的结果暂存,以后遇到相同的请求,直接返回暂存的数据.我想这是大部分童鞋对于缓存的理解.在计算机系统中,缓存无处不在,比如我们访问一个网页,网页和引用的 J ...

  8. Go语言实现：【剑指offer】删除链表中重复的结点

    该题目来源于牛客网<剑指offer>专题. 给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中没有重复出现的数字. 示例 1: 输入: 1->2->3->3- ...

  9. 【C++】C++程序链接失败，无法解析的外部命令，无法解析的外部符号 "private: static class * Object::current"

    C++程序编译结束后,出现链接失败提示: 严重性    代码    说明    项目    文件    行    类别    禁止显示状态错误    LNK2001    无法解析的外部符号 &quo ...

  10. Csp_J2019游记

    Day_-14 学校开始停课集训,还好还有上午~~ Day_-7 马上半期考试+\(Csp\),心态已炸,却还要坚持集训 Day_-1 \(Csp\)前夕,打算临时抱抱佛脚,死磕了一下图论(诸如最小生 ...