CSS3结构类选择器补充
: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结构类选择器补充的更多相关文章
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）
<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）
nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li>< ...
- CSS3 伪类选择器 :nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...
- CSS3伪类选择器
first-line 设置首行样式 first-letter 设置首字母样式 before 在某元素前插入内容并设置内容样式 after 在某元素后插入内容并设置内容样式 <!DOCTYP ...
- CSS3伪类选择器 图示
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- C#系列之Convert类型转换（三）
知识点一: 类型如果相兼容的两个变量,可以使用自动类型转化或者强制类型转换,但是,如果两个变量不兼容,比如说String和int或者String和Double类型,这个时候我们就需要一种名叫conve ...
- 中国天气网API接口
http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.h ...
- sock.listen()
(转载) 函数原型: int listen(int sockfd, int backlog); 当服务器编程时,经常需要限制客户端的连接个数,下面为问题分析以及解决办法: 下面只讨论TCP UDP不 ...
- python批量删除子文件夹中的空子文件夹
例如A文件夹下有许多子文件夹,我需要获得的是子文件夹中的图片,但是现在子文件夹中不光有图片,还混入了空的文件夹(在使用OpenImages工具箱的时候,按照检索的方式下载的图片文件中是带有label的 ...
- 编程思想（POP,OOP,SOA,AOP）
1)POP--面向过程编程(Process-oriented programming ): 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是系统的数据被加工和处理的过程,在程序设计 ...
- 15-Git使用语法
Git命令 版本库的创建 方法一:使用git bash 1. 在当当前要加创建版本库的文件夹右键使用GitBash 创建仓库执行命令: $ git init 方法二:使用TortoiseGit 2. ...
- CentOS7重置密码
#在vmlinuz段最后添加rd.break Ctrl+X启动 rd.break #在linux16/linux/linuxefi所在参数行尾添加以下内容 init=/bin/sh #此时,可使用mo ...
- 2020 年 中国.NET开发者调查报告
微信公众号dotnet跨平台2020年初做的一个关于中国.NET开发者调查收到了开发者近 1400 条回复.这份调查报告涵盖了开发者工具链的所有部分,包括编程语言.应用架构.应用服务器.运行时平台.框 ...
- C语言RH850 F1L serial bootloader和C#语言bootloader PC端串口通信程序
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程 ...
- CoreLocation在iOS8上用法的变化
1.在使用CoreLocation前需要调用如下函数[iOS8专用]: iOS8对定位进行了一些修改,其中包括定位授权的方法,CLLocationManager增加了下面的两个方法: (1)始终允许访 ...