话说园子里也混迹多年了,但是基本没写过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 ...
随机推荐
-
pydev+python+Eclipse环境搭建+ 调试快捷键汇总
http://www.cnblogs.com/Bonker/p/3584707.html 编辑器: Eclipse + pydev插件 1. Eclipse是写JAVA的IDE, 这样就可以通用了,学 ...
-
unix时间戳和localtime
今天看代码的时候看到这么一段 void user::setHelpday() { int time = ::getTickCount(); m_helpday = (time +( * ))/( * ...
-
PopupWindow源码分析
PopupWindow是我们经常使用的一个控件,严格来说这个PopuWindow就用来在指定位置显示一个View. 经过分析源码,PopupWindow里面没有Window对象,只是把View设置到屏 ...
-
查看Redis信息和状态
原文转自:http://redisdoc.com/server/info.html INFO [section] 以一种易于解释(parse)且易于阅读的格式,返回关于 Redis 服务器的各种信息和 ...
-
LeetCode &; Q35-Search Insert Position-Easy
Array Binary Search Description: Given a sorted array and a target value, return the index if the ta ...
-
【转】Nginx 学习笔记(十一)nginx下安装配置naxsi waf防火墙(附完整编译、配置)
原文地址:http://f2ex.cn/nginx-installed-configuration-naxsi-waf/ Naxsi 是第三方 nginx 模块 ,它和 Modsecurity 都是开 ...
-
php常用函数搜集
搜集了几个php常用函数方法....相信项目中肯定会用到吧... <?php /** * @param $arr * @param $key_name * @return array * 将数据 ...
-
codevs 2606 约数和(分块优化数学公式 )
题目背景 Smart最近沉迷于对约数的研究中. 题目描述 对于一个数X,函数f(X)表示X所有约数的和.例如:f(6)=1+2+3+6=12.对于一个X,Smart可以很快的算出f(X).现在的问题是 ...
-
【基础】selenium中元素定位的常用方法(三)
一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...
-
Python爬虫项目--爬取自如网房源信息
本次爬取自如网房源信息所用到的知识点: 1. requests get请求 2. lxml解析html 3. Xpath 4. MongoDB存储 正文 1.分析目标站点 1. url: http:/ ...