【CSS3】选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="class1" class="class2">h1标题内容</h1><!--一个元素可以有多个类名称-->
<p class="class1">p段落内容</p>
<div id="div1" class="class1">div的内容</div>
</body>
</html>
p{color:green;}/*元素选择器样式优先级高于通用选择样式*/
*{color: red}/*星号*为通用样式*/
#div1{color: blue}/*id选择器样式高于通用选择器和元素选择器样式*/
div{color: yellow}
.class1{color: pink}/*类选择器样式低于id选择器样式，高于元素选择器样式和通用选择器样式*/
h1.class1{padding: 20px}/*指定类名称为某个特定元素的*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<input type="text" name="text1" style="padding: 10px 20px 30px">
<input type="text" name="text2" style="padding: 15px 25px 35px">
<input lang="en-us" type="tel">
<input type="email" name="email" value="qq@qq.com">
<input type="submit" name="submit" value="确认">
</form>
</body>
</html>
/*input[name]{background: red}*/
/*input[name][value]{background: green}*//*含指定属性的元素*/
/*input[name="email"]{background: blue}*//*指定属性等于指定值的元素*/
/*input[style~='25px']{background:green}*/
/*input[lang|='en']{background: pink}*//*属性值以en开头，并后跟-的元素*/
/*input[name^="e"]{background:red }*//*属性name值以e开头的元素*/
/*input[name$="t"]{background: red}*//*指定属性值以特定字符串结尾的元素*/
input[name*="a"]{background: red}/*指定属性值包含特定字符串的元素*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>第一个li元素
<ol>
<li>后代选择器</li>
<li>后代选择器</li>
</ol>
</li>
</ul>
<div>
<h1>h1h1</h1>
<p>p标签</p>
<h2>h2标签</h2>
<h1>h1标签</h1>
</div>
<h1>第3个h1标签</h1>
</body>
</html>
/*ul li{background: red}*/
/*ul>li{color: red;border:1px solid;}*//*颜色会被继承下去。边框不会被继承，只对子级有效，对孙级无效。*/
/*div h1{color: red}*/
/*p+h1{color: red}*//*紧贴在p之后的h1元素，如果p和h1之间有其他元素则无效*/
p~h1{color: red}/*p之后的所有h1，p之前的h1无效，p之后的h1和p之间有其他元素不会干扰。超出同个父级标签范围之后的h1无效*/
伪元素选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
万里长城永不倒<br>
千里黄河水涛涛
</p>
</body>
</html>
/*伪元素选择器*/
p::first-letter{color: red;font-size: 60px}
p::first-line{background: red}
p::before{content: "前插入内容"}
p::after{content: "后插入内容"}/*不止插入文字，还可插入图片等*/
p::selection{background: pink}
结构伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>第一个子元素</li>
<ol>
<li>第1个子元素</li>
<li>第2个子元素</li>
<li>第3个子元素</li>
</ol>
<li>第二个子元素</li>
<li>第三个子元素</li>
</ul>
<ul><li>仅有的一个无序列表</li></ul>
<ol><li>仅有的一个有序列表</li></ol>
<div>
<h1>父元素下同类型h1元素只有一个</h1>
<p>父元素下同类型p元素只有一个</p>
</div>
<div>
<p>父元素下同类型p元素只有一个</p>
</div>
<div>
<p>父元素下同类型p元素有两个。有子元素。
<h2>h2元素</h2>
</p>
<p>父元素下同类型p元素有两个</p>
</div>
<div></div>
</body>
</html>
/*伪类选择器*/
/*结构伪类选择器*/
/*:root{background: blue};*//*root指html标签*/
/*li:first-child{color: red}*//*要满足两个条件：1.是li元素；2.是其父元素的第一个子元素*/
/*ol>li:first-child{background: green}
ul>li:last-child{color:blue;}*/
/*p:only-child{background: red}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个元素*/
/*p:only-of-type{color: green}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个p元素*/
/*li:first-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是第一个li元素。即匹配同级同类型第一个元素*/
/*li:last-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素在父元素内是最后一个li元素。即匹配同级同类型最后一个元素*/
/*li:nth-of-type(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型第2个li元素。即匹配同级同类型第2个元素*/
/*li:nth-last-of-type(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型倒数第一个li元素。即匹配同级同类型倒数第1个元素*/
/*li:nth-child(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第2个元素*/
/*li:nth-last-child(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素是父元素内倒数第1个元素*/
/*li:nth-child(odd){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第奇数个元素*/
/*li:nth-child(even){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第偶数个元素*/
/*li:nth-child(3n){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第3n个元素。还可用3n+1等各种表达式*/
div:empty{width: 300px;height: 200px;background: red}/*要绝对的空，连内容都不能有，空格都不能有*/
UI伪类选择器、其他伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="">链接</a>
<a href="">链接2</a>
<a href="#p1">链接到target</a>
<form>
<input type="text" name="">
<input type="email" name="">
<input type="tel" name="" lang="zh-CN">
<input type="checkBox" name="" disabled="">复选框
<input type="radio" name="">单选按钮
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p lang="" id="p1">target链接过来的文本内容</p>
</body>
</html>
/*伪类选择器*/
/*UI伪类选择器*/
/*a:active{background: blue}*/
/*a:hover{background: blue}*/
/*a:link{color: pink;background: green}*//*未访问过的链接颜色设置要放在访问过的设置之前才有效*/
/*a:visited{color: red}*/
/*input:focus{background: pink}*/
/*input:lang(zh-CN){background: pink}*/
/*input:checked{width: 20px;height: 20px}*/
/*input:disabled{width: 30px;height: 30px}*/
/*input:enabled{width: 30px;height: 30px}*/
/*p:target{color: red}*//*p元素的内容在被链接过来时会使用的样式*/
:not(a){color: red}
选择器优先级：
一般情况：行内样式>ID>类>元素；
范围更小，描述更精准的优先级高；
后设置的优先级高。
【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 ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
随机推荐
- ASP.NET Core 认证与授权[5]:初识授权
经过前面几章的姗姗学步,我们了解了在 ASP.NET Core 中是如何认证的,终于来到了授权阶段.在认证阶段我们通过用户令牌获取到用户的Claims,而授权便是对这些的Claims的验证,如:是否拥 ...
- Mybatis查询时报 Bad format for Time '454:54:54' in column 6 异常
报 Bad format for Time '454:54:54' in column 6 解决方案:1. 查询实体类和.xml数据是否相对应 2. 查询sql是否正确 3. 查看表的设计,是 ...
- Python随笔------初探
今年的双十一刚刚才过去,大多数人主要就是抢购商品,可能他们现在已经收到了他们夜以继日抢购的商品.然而对于我们做技术的,特别是做互联网技术的,我相信肯定都被双十一那天的许多技术震撼到了吧.云计算.分压式 ...
- linux正确的关机方法
[root@localhost ~]# sync #数据写入磁盘 [root@localhost ~]# shutdown -h 10 #通知用户再过10分钟就关机 [root@localhost ~ ...
- tensorflow初探
TensorFlow是一个采用数据流图,用于数值计算的开源软件库.自己接触tensorflow比较的早,可是并没有系统深入的学习过,现在TF在深度学习已经成了"标配",所以打算系统 ...
- 微软为.NET程序员带来了最优的跨平台开发体验-WSL
前言 在前几个Visual Studio Code更新中发现有一个重要得特性,就是nodejs可以使用VS Code在WSL中进行Debug了(WSL是指Win10中的Linux子系统),之前写过一篇 ...
- 独家分析：安卓“Janus”漏洞的产生原理及利用过程
近日,Google在12月发布的安卓系统安全公告中披露了一个名为"Janus"安卓漏洞(漏洞编号:CVE-2017-13156).该漏洞可以让攻击者绕过安卓系统的signature ...
- POJ1273 网络流-->最大流-->模板级别-->最大流常用算法总结
一般预流推进算法: 算法思想: 对容量网络G 的一个预流f,如果存在活跃顶点,则说明该预流不是可行流. 预流推进算法就是要选择活跃顶点,并通过它把一定的流量推进到它的邻接顶点,尽可能将正的赢余减少为0 ...
- 【epubcfi函数generateRangeFromCfi和generateCfiFromRange】两者的区别和适用性，以及另一种实现
epubcfi是描述epub规范电子书中文本位置的一种描述符,它是形如" epubcfi(/6/4[Section0017.xhtml]!4/42/178/1:0,4/42/198/1:1) ...
- 室内地图1：从CAD到Map（画图，发布，路径导航）
首先这个教程整理,比较偏细节. 因为我本身不是做GIS,所以可能有点流水账,当然错漏难免,恳请指正. 当我们做定位的时候,想要可视化展示,室外当然可以直接使用google,百度的底图.对于室内,有两种 ...