CSS3选择器～一看吓一跳，这么多不会
复习CSS时发现很多选择器不会，因为平时很少用到。现在干脆一不做二不修，全部温习一遍。本文参考http://css.doyoe.com/.
一、元素选择器
图片来自：http://css.doyoe.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
h1{
background: red;
}
#ppp{
color: blue;
}
.ccc{
border: 1px solid yellow;
}
</style>
</head>
<body>
<h1>我是h1</h1><br>
<p id="ppp">我是p</p><br>
<ul class="ccc">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
</body>
</html>
二、关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
.u1 li{
border: 1px solid blue;
}
.u2>li{
border: 1px solid blue;
}
.u3 li+li{
background: yellow;
}
.u4 .firstli~li{
border: 1px solid black;
}
</style>
</head>
<body>
<h6>第二个ul</h6>
<ul class="u1">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>
<ul>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
</ul>
</li>
</ul>
<h6>第二个ul</h6>
<ul class="u2">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>
<ul>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
</ul>
</li>
</ul>
<h6>第三个ul</h6>
<ul class="u3">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>
<ul>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
</ul>
</li>
</ul>
<h6>第四个ul</h6>
<ul class="u4">
<li class="firstli">我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>
<ul>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
<li>我是第二级别的li</li>
</ul>
</li>
</ul>
</body>
</html>
三、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.u1 li[class]{
background: blue;
}
.u2 li[class^='aa']{
border: 1px solid red;
}
.u2 li[class$='bb']{
border: 1px solid black;
}
.u3 li[class*=dd]{
background: yellow;
}
.u3 li[class|='aa']{
background: black;
}
</style>
</head>
<body>
<h6>第一个ul</h6>
<ul class="u1">
<li>我是li1</li>
<li>我是li2</li>
<li class="ddbb">我是li3</li>
<li>我是li4</li>
</ul>
<h6>第二个ul</h6>
<ul class="u2">
<li class="aaee">我是li1</li>
<li class="aacc">我是li2</li>
<li class="ddbb">我是li3</li>
<li class="wwbb">我是li4</li>
</ul>
<h6>第三个ul</h6>
<ul class="u3">
<li class="aa-bb">我是li1</li>
<li class="xx-aa">我是li2</li>
<li class="dd-bb">我是li3</li>
<li>我是li4</li>
</ul>
</body>
</html>
四、伪类选择器
天哪这么多，用不了那么多吧。测试几个，容我花5分钟背一背
http://css.doyoe.com/selectors/pseudo-classes/index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
.u1 li:first-child{
background: red;
}
.u1 li:last-child:hover{
background: blue;
}
.u1 li:nth-child(2){
background: yellow;
}
ul:empty{
border: 1px solid black;
}
.u3 li:not(.aa-bb){
background: red;
}
</style>
</head>
<body>
<h6>第一个ul</h6>
<ul class="u1">
<li>我是li1</li>
<li>我是li2</li>
<li class="ddbb">我是li3</li>
<li>我是li4</li>
</ul>
<h6>第二个ul</h6>
<ul class="u2" style="height: 20px"></ul>
<h6>第三个ul</h6>
<ul class="u3">
<li class="aa-bb">我是li1</li>
<li class="xx-aa">我是li2</li>
<li class="dd-bb">我是li3</li>
<li>我是li4</li>
</ul>
</body>
</html>
五、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
p::first-line{
color: red;
}
p::first-letter{
font-size: 40px;
}
p::before{
content: "##";
}
p::after{
content: "$$";
}
input::placeholder{
color: red;
}
input::selection{
border: 1px solid blue;
}
</style>
</head>
<body>
<p>CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性
</p>
<input type="text" name="" placeholder="哈哈哈哈">
<input type="text" name="" value="ffffffffff">
</body>
</html>
测试完毕！参考：http://css.doyoe.com/
CSS3选择器～一看吓一跳，这么多不会的更多相关文章
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器（三）
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- css3 选择器（二）
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- everything 快速搜索有代价
我在一台电脑上运行过everything后,把它拷贝到另一台电脑上运行,前一台电脑上的搜索结果记录居然还,包括文件类型,标题,大小,位置.天呐··· 虽然看不到内容,但对于一个社工来说,一个标题完全足 ...
- java标签（label）求16进制字符串的整数和 把一个整数转为4个16进制字符表示
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4f76cb } p.p2 { margin: 0.0px 0. ...
- 利用内核cgroup机制轻松实现类似docker的系统资源管控
近几年,以docker为代表的容器技术异常火热,它的轻量.高效让人欣喜若狂,它被赋予了改变传统IT运维的使命.相信随着时间推移,以容器云为落地形式的产品将真正实现这一使命. 我们都知道docker能够 ...
- 1724: [Usaco2006 Nov]Fence Repair 切割木板
1724: [Usaco2006 Nov]Fence Repair 切割木板 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 854 Solved: 42 ...
- 通讯录--(适配iOS7/8/9)
导入库#import <AddressBook/AddressBook.h> #import <AddressBookUI/AddressBookUI.h> #pragma m ...
- JAVA I/O 字符输出流简要概括
偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- Jmeter接口压力测试
SOAP百科:Soap简单对象访问协议,是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息.webServi ...
- 启动tomcat直接报错：org.apache.tomcat.util.digester.Digester startElement
今天很奇怪,自己手动搭建了一个ssm(spring+springmvc+mybatis)的项目,然后添加到tomcat下,启动直接报错: 2017-3-19 9:24:47 org.apache.to ...
- JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建
本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...