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中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- liberty | 在IDEA整合Springboot与IBM liberty
在IDEA整合Springboot与IBM liberty 简介 Liberty 是一款全新的轻量级应用服务器,它将用户的良好开发体验作为最主要的出发点.其主要特点和内容包括: 高模块化--该功能允许 ...
- sizeof('a')
#include <iostream> using namespace std; int main(void) { cout << sizeof('a') << e ...
- c++中的 static 关键字
注:若没有特指是 静态成员时,默认都是普通成员: 1 类中的普通成员 类中的成员变量 和 成员函数 是分开存储的.其中, 1)每个对象都有独立的成员变量:成员变量可以存储在 栈空间.堆空间.全局数据区 ...
- java13人机猜拳
public class Demo01 { public static void main(String[] args) { /* * 你同桌和你要玩游戏. * 1 剪刀,2 石头,3 布 */ // ...
- 【OpenGL】GL_DEPTH_TEST深度测试问题
记录一个深度测试的问题 在实现一个简单的OpenGL程序时,遇到了一个问题,深度测试总是有问题,无法正常显示,如下 正常情况为 通过调试发现屏幕空间中的所有深度值均为1. OpenGL代码如下: vo ...
- NR / 5G - The Round Robin algorithm
- redis基础知识汇总
- ELF文件之二——使用链接脚本
main.c int main() { ; } 编译:sparc-elf-gcc.exe -c main.c -o main.o 链接:sparc-elf-ld.exe main.o -nostart ...
- 终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩
昨天晚上通过压测验证了 HPA 部署成功了. 所使用的 HPA 配置文件如下: apiVersion: autoscaling/v2beta2 kind: HorizontalPodAutoscale ...
- k8s系列---部署集群
docer启动出错 [root@centos-minion yum.repos.d]# systemctl start docker Job for docker.service failed bec ...