【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。
CSS3属性选择器
下面是CSS3的属性选择器的语法,及使用。
元素名字[元素类型=“类型名字”]:选择器名字{
属性:值;
属性:值;
}
在元素类型匹配时,就可以使用类似正则的匹配方法。
[att=val] 指定特定名字的元素
[att*=val] 匹配val*的元素,
[att^=val] 匹配val开头的元素,比如id为val1、val432432都可以。
[att$=val] 匹配val结尾的元素,比如id为1213val、fdajlval等等。
伪元素选择器
通常,CSS中会有一些已经定义好的元素选择器,我们通过
选择器:伪元素{属性名:值}
来定义。
常用的伪选择器有:
1 first-line 伪元素选择器:某个元素的第一行
2 first-letter:某元素的首字母
3 after:某元素之后插入内容,如
<p>:before{
content:123
}
4 before:某元素之前插入内容
常用选择器
root:整个DOM的元素定点,也就是html
not:排除特定的元素
empty:比如一个列表空的那个元素
target:链接指定的目标
<html>
<head>
<style type="text/css">
:target{
background-color:yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例1</a>|
<a href="#text2">示例2</a>|
<a href="#text3">示例3</a>|
<a href="#text4">示例4</a>|
<a href="#text5">示例5</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>..此处省略..</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>..此处省略..</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>..此处省略..</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>..此处省略..</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>..此处省略..</p>
</div>
</body>
</html>
点击图片就可以看到效果
first-child:选择第一个子元素
last-child:选择最后一个子元素
nth-child:选择第n个子元素,这个还可以根据奇偶来制定,比如:
<子元素>:nth-child(even){
...
}
<子元素>:nth-child(odd){
...
}//也可以通过在括号内使用2n+1来,指定奇偶
nth-last-child:选择倒数第n个子元素
only-child:单个子元素时,指定样式
元素状态选择器
hover:当鼠标浮在元素上方时,触发
active:当鼠标按下,还没有离开时,触发。因为chrome不支持,所以没有进行测试。
focus:编辑焦点时,触发
enabled:可以使用时,触发
disabled:不可以使用时,触发
read-only:只读时,触发
read-write:可读可写时,触发
checked:被勾选触发
selection:选择时,触发
<html>
<head>
<style type="text/css">
p::selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
td::selection{
background:green;
color:#FFF;
}
</style>
</head>
<body>
<p>hello!xingoo</p>
<hr/>
<input type="text" value="hello!xingoo" />
<hr/>
<table border="1" cellspacing="0" cellpadding="0" >
<tr>
<td>
hello!
</td>
<td>
xingoo!
</td>
</tr>
<tr>
<td>
123!
</td>
<td>
456!
</td>
</tr>
</table>
</body>
</html>
default:比如多选框,页面刷新时,默认选择触发
indeterminate:比如多选框,都没选时的样式
<html>
<head>
<script>
function radio_onchange()
{ var radio = document.getElementById("radio1");
var text = document.getElementById("text1");
console.log(text.disabled);
if(radio.checked){
console.log("checked");
text.disabled = "";
}else{
console.log("unchecked");
text.value = "";
text.disabled = "disabled";
}
}
</script>
<style type="text/css">
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
input[type="text"]:hover{
background-color:skyblue;
}
input[type="text"]:focus{
background-color:red;
}
input[type="text"]:read-only{
background-color:gray;
} input[type="checkbox"]:checked{
outline:2px solid blue;
} input[type="checkbox"]:indeterminate{
outline:2px solid red;
}
</style>
</head>
<body>
<form>
<input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />
<p>
姓名:<input type="text" name="name" /><br/>
Email:<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" />
</p> 兴趣:<input type="checkbox">阅读</input>
<input type="checkbox">电影</input>
<input type="checkbox">游戏</input>
<input type="checkbox">上网</input>
<br/> </form>
</body>
</html>
invalid:不符合元素范围的
valid:符合元素范围校验的
<html>
<head>
<style type="text/css">
input[type="text"]:invalid{
background-color:red;
}
input[type="text"]:valid{
background-color:white;
}
</style>
</head>
<body>
<form>
<p>必须输入文字:<input type="text" required /></p>
</form>
</body>
</html>
不合法时
合法时
required:支持这个属性,并且定义了required的
optional:支持requried属性,但是没有定义的
<html>
<head>
<style type="text/css">
input[type="text"]:required{
border-color:red;
border-width:3px;
}
input[type="text"]:optional{
border-color:blue;
border-width:3px;
}
</style>
</head>
<body>
<form>
姓名:<input type="text" required placeholder="必须输入" /><br/>
年龄:<input type="text" />
</form>
</body>
</html>
in-range:在范围内的
out-of-range:超出范围的
<html>
<head>
<style type="text/css">
input[type="number"]:in-range{
background-color:white;
}
input[type="number"]:out-of-range{
background-color:red;
}
</style>
</head>
<body>
test number 1-100<input type=number min=0 max=100>
</body>
</html>
正常范围时
超出范围时
【前端开发系列】—— CSS3属性选择器总结的更多相关文章
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- css3属性选择器总结
前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...
- css3系列之属性选择器
Attribute Selectors(属性选择器) E[attr ~="val"] E[attr |="val"] E[attr ^="val&qu ...
- css3 -- 属性选择器
属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- 前端开发:CSS3
CSS介绍: CSS能够使页面具有美观一致的效果,并且能够让内容与格式分离,利于扩展 所以,CSS解决了下面两个问题: 1. 将HTML页面的内容与格式分离: 2. 提高web开发的工作效率. CSS ...
- BizTalk开发系列(五) 属性字段
在根据消息内容进行路由的时候经常使用的是可分辨字段和属性字段.属性字段可以在各个 BizTalk Server 组件(包括管道和业务流程)中进行访问.属性字段还可用于消息路由.如果需要在上下文(而不是 ...
- 【前端开发系列】—— 别说你不会Ajax
之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的.这里正好就进行一下学习,下面是Ajax的一个时间图. 设置触发条件 这里模拟一个使用场景,就是在用户登陆时,异步的对用户名以及密码进 ...
- css3属性选择器
随机推荐
- oracle11G在linux环境下的卸载操作
1.使用SQL*PLUS停止数据库[oracle@OracleTest oracle]$ sqlplus logSQL> connect / as sysdbaSQL> shutdown ...
- Hadoop,Vertica环境搭建
本打算使用mapr的虚拟机在里面进行开发,使用eclipse进行调试,它的问题是,有时候服务不能完全起来, 如jobtracker和tasktracker,cldb没有起来,重启服务有可能解决. 但另 ...
- [麦先生]学习PDO循序渐进使用方式
使用方式 特点一:支持跨数据库 1:首先实例化PDO,创建PDO对象的四个必备参数:host(哪一种类型的数据库,mysql/orcal/SQLserver等);dbname(数据库的名称);cha ...
- 请叫我机智-巧用ios朗读kindle图书
想必大家都有想过kindle出中文的有声阅读刊物吧? 今天突发奇想想到一招能够让我们听自己拿kindle买的中文图书.当然这是有条件的. 前提是你得有一个ios设备,不管是iphone还是ipad,i ...
- 【转】${sessionScope.user}的使用方法
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- JavaWeb学习之Servlet(三)----Servlet的映射匹配问题、线程安全问题
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140529.html 一.Servlet映射匹配问题: 在第一篇文章中的 ...
- Java学习----Java概述
一.常用DOS命令 d: 盘符切换 dir(directory) 列出当前目录下的文件以及文件夹 md (make directory) 创建目录 rd (remove director ...
- linux下查找某个目录下包含某个字符串的文件
有时候要找一些字符串,但是又不知道在哪个文件,只记得一些字符串 那么如何在linux下寻找包含某段文字的文件呢? 强大的find命令可以帮你完成不可能的任务. 比如我只记得我的程序里包含唯一的字符串“ ...
- [转] 国外程序员整理的 C++ 资源大全
关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了S ...
- 谈谈redis主从复制的重点
Redis主从复制的配置十分简单,它可以使从服务器是主服务器的完全拷贝.下面是关于Redis主从复制的几点重要内容: Redis使用异步复制.但从Redis 2.8开始,从服务器会周期性的应答从复制流 ...