CSS3选择器介绍
1.css3属性选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>css3属性选择器</title>
<style type="text/css">
/* id包含div字符串*/ [id*=div] {
color: lime;
}
/*开始字符串为div*/ [id^=div] {
color: red;
}
/*结束字符串为div*/ [id$=div] {
color: blue;
}
</style>
</head> <body>
<div>
<div id="div1">11</div>
<div id="2div2">22</div>
<div id="3div3">33</div>
<div id="44div">44</div>
<div id="wowo">55</div>
</div>
</body> </html>
2.css3结构伪类选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>css3结构伪类选择器</title>
<style type="text/css">
/* 第一行*/ body>p:first-line {
color: aqua;
}
/* 首字母*/ body>p:first-letter {
color: red;
}
/*元素前插入内容*/ li:before {
content: "--";
color: yellow;
}
/*元素后插入内容*/ li:after {
content: "++";
color: green;
}
/*根元素*/ :root {
background: darkgrey;
}
/*排除*/ div *:not(h1) {
background: green;
}
/*为空*/ .bb li:empty {
background: green;
}
/*业内跳转目标*/ :target {
background: orange;
}
</style>
</head> <body>
<p>
我是第一行
<br> 我是第二行
</p>
<ul>
<li class="aa">1</li>
<li>2</li>
<li class="aa">3</li>
<li class="aa">4</li>
</ul>
<ul class="bb">
<li>1</li>
<li></li>
<li>3</li>
<li></li>
<li>5</li>
<li></li>
</ul>
<div>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
</div>
<a href="#a1">111</a>
<a href="#a2">222</a>
<a href="#a3">333</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
</body> </html>
3.css3选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>css3选择器</title>
<style type="text/css">
/*第一个元素*/ li:first-child {
background-color: yellow;
}
/*最后一个元素*/ li:last-child {
background-color: blue;
}
/*上到下第几个*/ li:nth-child(2) {
background-color: #666;
}
/*下到上第几个*/ li:nth-last-child(2) {
background-color: #888;
}
/*基数*/ li:nth-child(odd) {
color: red;
}
/*偶数*/ li:nth-child(even) {
color: #999;
}
/*只算同类元素*/ .aa h3:nth-of-type(2),
.aa h4:nth-of-type(2) {
color: red;
}
/*样式循环*/ .bb li:nth-child(4n+1) {
background-color: #111;
} .bb li:nth-child(4n+2) {
background-color: #222;
} .bb li:nth-child(4n+3) {
background-color: #333;
} .bb li:nth-child(4n) {
background-color: #444;
}
/*只有一个元素*/ li:only-child {
background-color: green;
}
</style>
</head> <body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
</ul>
<div class="aa">
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
</div>
<div class="bb">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
<ul>
<li>11</li>
</ul>
</body> </html>
4.UI元素状态伪类选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>UI元素状态伪类选择器</title>
<style type="text/css">
/*hover鼠标在控件上*/ input[type="text"]:hover {
background-color: darkviolet;
}
/*focus获取焦点*/ input[type="text"]:focus {
background-color: aqua;
}
/*active鼠标按住*/ input[type="text"]:active {
background-color: #666;
}
/*checked已选择状态*/ input[type="checkbox"]:checked {
outline: 2px solid gold;
}
/*enabled可用*/ .aa input[type="text"]:enabled {
background: yellow;
}
/*disabled不可用*/ .aa input[type="text"]:disabled {
background: red;
cursor: pointer;
}
</style>
</head> <body>
<input type="text" name="name">
<input type="text" name="age">
<input type="checkbox">111
<input type="checkbox">222
<input type="checkbox">333
<div class="aa">
<input type="text" name="name" id="t1">
<input type="text" name="age" id="t2" disabled>
</div>
</body> </html>
5.通用兄弟选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
/*跟在div后面的p元素*/
div~p {
background: gold;
} </style>
</head> <body>
<div>
<div>
<p>div的子元素p</p>
<p>div的子元素p</p>
</div>
<p>div相邻元素p</p>
<p>div相邻元素p</p>
<h4>----------</h4>
<div>
<p>div的子元素p</p>
</div>
<p>div相邻元素p</p>
<p>div相邻元素p</p>
</div>
<p>div相邻元素p</p>
<p>div相邻元素p</p>
</body> </html>
CSS3选择器介绍的更多相关文章
- CSS3 选择器 基本选择器介绍
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- [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中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS3选择器:nth-child和:nth-of-type之间的差异
CSS3选择器:nth-child和:nth-of-type之间的差异 这篇文章发布于 2011年06月21日,星期二,23:04,归类于 css相关. 阅读 57546 次, 今日 143 次 by ...
随机推荐
- TCP/IP协议
1.为什么有了IP地址还需要MAC地址? 首先,数据或者信息在网络上的传输需要两个地址:目的地址和下一跳地址.其中IP地址就是目的地址,而MAC地址则是下一跳地址.目的地址在经过路由器转发的时候是不会 ...
- oneThink后台添加插件步骤详解
内容管理框架:oneThink 版本:V1.1.141212 (注:v1.1也有很多版本,一不小心就下到V1.1.140202 去了,还有其他版本,建议去代码托管平台下载最新版本) 我也不偷懒,把每一 ...
- 如何让tableViewCell的分割线从边框顶端开始
在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作 -(voi ...
- 解决：笔记本安装mint18时，安装界面显示不全
近日在给自己的笔记本安装mint18时,安装界面显示不全,就是安装时到了分区界面后看不到下一步. 很无奈.... 于是胡乱摸索,得到解决的办法. 按住键盘上的ALT键,用鼠标向上拖动安装的界面,最好是 ...
- bzoj4498: 魔法的碰撞
首先,如果排列确定,那么就可以组合学解决了,不过排列数很多,显然不能枚举. 我们发现如果区间不能重叠的话,总长度减去所有区间长度就是能用的多余格子数. 然而相邻区间可以重叠较小区间一半的长度,因此这些 ...
- Java的多线程机制系列：(一)总述及基础概念
前言 这一系列多线程的文章,一方面是个人对Java现有的多线程机制的学习和记录,另一方面是希望能给不熟悉Java多线程机制.或有一定基础但理解还不够深的读者一个比较全面的介绍,旨在使读者对Java的多 ...
- 使用ASP.NET WEB API构建基于REST风格的服务实战系列教程(一)——使用EF6构建数据库及模型
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 使用Entity Framework Code First模式构建数据库对象 已经决定使用EF C ...
- python Windows下的android设备截图工具
目录 界面版 命令行版 界面版 利用python的wx库写个ui界面,用来把android设备的截图输出到电脑屏幕,前提需要安装adb,涉及到的python库也要安装.代码如下: #!/usr/bin ...
- morse code
morse code,摩斯电码,是一种时通时断的信号代码,通过不同的排列顺序来表达不同的英文字母.数字和标点符号. 摩斯电码,是一种早期的数字化通信形式,但是它不同于现代只使用0和1两种状态的二进制代 ...
- php如何防止图片盗用/盗链的两种方法
如今的互联网,采集网站非常多,很多网站都喜欢盗链/盗用别人网站的图片,这样不仅侵犯网权,还导致被盗链的网站消耗大量的流量,给服务器造成比较大的压力,本文章向大家介绍php如何防止图片盗用/盗链的两种方 ...