神奇的CSS3选择器
话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。
Css3选择器
先说下，为什么提倡使用选择器。
- 使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。
- 减少样式表的代码量。
属性选择器
1.[att*=val]属性选择器
意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[id*=demo]
{
width: 100px;
height: 100px;
background-color: #000099;
} </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
2.[att^=val]属性选择器
意义：表示元素用att表示的属性的属性值以val表示的字符串开头，则该元素使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[id^=demo]
{
width: 100px;
height: 100px;
background-color: #000099;
margin: 10px;
} </style>
</head>
<body>
<div id="demo"></div>
<div id="demo1"></div>
</body>
</html>
3.[att$=val]属性选择器
意义：表示元素用att表示的属性的属性值以val表示的字符串结尾，则该元素使用这个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[id$=o]
{
width: 100px;
height: 100px;
background-color: #000099;
margin: 10px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div id="demooo"></div>
</body>
</html>
结构性伪类选择器
伪类选择器是指已经定义好的选择器，不能随便起名。
例如：a:link,a:visited,a:hover,a:active.
伪元素选择器是指已经定义好的为元素使用的选择器。
- first-line伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:first-line
{
color: red;
}
</style>
</head>
<body>
<p>
hello world
<br/>
你好
</p>
</body>
</html>
2.first-letter 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:first-letter
{
color: red;
}
</style>
</head>
<body>
<p>
hello world
</p>
<p> 你好</p>
</body>
</html>
befor伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:before
{
content: '*';
}
</style>
</head>
<body>
<ul>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
</ul>
</body>
</html>
after伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:after
{
content: '*';
}
</style>
</head>
<body>
<ul>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
<li>demo1</li>
</ul>
</body>
</html>
root选择器
root选择器将样式绑定到页面的根元素。在使用：root与body元素的背景时，根据不同的条件，显示效果不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
:root
{
background-color: #003300;
}
body
{
background-color: yellow;
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
not 选择器
排除结构元素下面子结构元素，使他不使用该元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body *:not(h1)
{
background-color: yellow;
}
</style>
</head>
<body>
<h1>大家好</h1>
<p>你好</p>
</body>
</html>
empty选择器
当元素内容为空时使用的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
td:empty
{
background-color: yellow;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px"></td>
</tr>
</table>
</body>
</html>
target选择器
使用target选择器给页面中的target元素使用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
:target
{
background-color:yellow;
}
</style>
</head>
<body>
<table border="1">
<a href="#text3">示例1</a>
<div id="text1">
<h1>你好</h1>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
<div id="text2">
<h1>你好</h1>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
<div id="text3">
<h1>你好</h1>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
</table>
</body>
</html>
first-child、last-child选择器
指定第一个子元素和最后一个子元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:first-child
{
background-color: yellow;
}
li:last-child
{
background-color: #009999;
}
</style>
</head>
<body>
<table border="1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
</ul>
</table>
</body>
</html>
nth-child、nth-last-child选择器
针对父元素中某个指定序号的子元素来指定样式。
也可以使用Nth-child(even)对偶数子元素指定样式，Nth-child(odd)对奇数元素指定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:nth-child(2)
{
background-color: yellow;
}
li:nth-last-child(2)
{
background-color: #009999;
}
</style>
</head>
<body>
<table border="1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
</ul>
</table>
</body>
</html>
nth-of-type nth-last-of-type选择器
这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷，这两个选择器只针对同类元素指定样式。
UI元素状态选择器
E:horver,E:active,E:focus选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type="text"]:hover
{
background-color: yellow;
}
input[type="text"]:focus
{
background-color: green;
}
input[type="text"]:active
{
background-color: red;
}
</style>
</head>
<body>
<input type="text" name="name">
</body>
</html>
E:enabled,E:disabled,E:read-only,E:read-write选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type="text"]:disabled
{
background-color: green;
}
input[type="text"]:read-only
{
background-color:darkgrey;
}
</style>
</head>
<body>
<input type="text" disabled>
<br>
<input type="text" >
<br>
<br>
<input type="text" readonly="readonly" >
</body>
</html>
E:checked、E:default选择器
E:checked指定复选框选取时的样式
E:default 指定默认选取框的样式
E::selection选择器
指定元素处于选中状态时的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p::selection
{
background-color: goldenrod;
}
</style>
</head>
<body>
<p>测试测试</p>
</body>
</html>
神奇的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选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究，案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- css3 选择器（二）
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
随机推荐
- flask前后台交互数据的几个思路
通过url进行参数传递: @app.route('/hello/<name>') # <name>为传递的参数 def hello(name=None): return ren ...
- angular 管理后台
http://blog.csdn.net/iamnieo/article/details/50474399
- javascript --学习闭包,自由变量
闭包 下面是百度百科的解释: 闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量). 也就是说一个代码块 ...
- Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...
- iPhone Push消息全攻略.1
要做一个iPhone Push消息的需求,从简单test的开始. 1.先添加一个app ID 2.点击Edit来配置push服务. 3.生成两个证书,一个用于开发,一个用于发布. 4.按下图操作创建一 ...
- WinForms 新窗体后台打开完美的解决
最近在做浏览器开发时,想要实现 IE 6那种多窗体,又允许后台打开而不抢占视野的方式. WinForms 应用程序中想要后台打开一个新的窗体,而不(抢焦).(遮挡)目前窗体. 需要注意的是,SW_SH ...
- 如何将mysql表结构导出成Excel格式的（并带备注）
http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...
- Codeforces Round #332 (Div. 2) B. Spongebob and Joke 水题
B. Spongebob and Joke Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/599 ...
- spring-mvc整合freemarker并在ftl模版中显示服务端校验的错误信息,JSR303或者JSR349
写法有多种,应该可以任意组合,最重要的是要引入spring.ftl 1.Bean里面的就不再多写了,来个简单就可以了 @NotEmpty(message="用户密码码不可为空") ...
- Android动画的实现 上
在Android系统中也能经常见到动画,那么如何实现动画效果呢?本文就来为大家介绍动画的实现方式. Android中动画的实现分两种方式,一种方式是补间动画Tween Animation,就是说你定义 ...