css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类
后代选择器
祖先元素 后代元素{ }
子元素选择器（直接子元素选择器）
父元素>子元素{ }
兄弟选择器
元素+兄弟元素（紧邻该元素之后的下一个兄弟元素）
所有兄弟元素选择器
元素~兄弟元素（该元素之后的所有兄弟元素）
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div+article{color:red;}
</style>
</head>
<body>
<div>这是div</div>
<article>这是article</article>
<article>这是article</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div~article{color:red;}
</style>
</head>
<body>
<div>这是div</div>
<article>这是article</article>
<article>这是article</article>
</body>
</html>
属性选择器
元素[属性]
选择所有带指定属性的元素
元素[属性=值]
选择所有带指定属性，并且指定属性值的元素
元素[属性~=值]
选择所有带指定属性，并且属性所包含的某个单词为指定属性值的元素
元素[属性*=值]
选择所有带指定属性，并且属性所包含的某个单词或者字母为指定属性值的元素
元素[属性^=值]
选择所有带指定属性，并且属性以指定值开头的元素，开头可以是一个完整的单词，也可以是单个字母
元素[属性$=值]
选择所有带指定属性，并且属性以指定值结尾的元素，结尾可以是一个完整的单词，也可以是单个字母
元素[属性|=值]
选择所有带指定属性，并且属性值为指定值，或者属性值以指定值-开头（在js中常常使用到）
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a[class]{font-weight:bold;}
a[class="one"]{color:red;}
a[class~="two"]{text-decoration: underline;}
a[class^="one"]{font-style:italic;}
a[class$="two"]{border-top:1px solid red;}
a[class*="two"]{border-bottom:1px solid red;}
a[class|="four"]{border-left:1px solid purple;}
</style>
</head>
<body>
<a class="one">链接</a>
<a class="one two">链接</a>
<a class="three one two">链接</a>
<a class="one~">链接</a>
<a class="threetwo">链接</a>
<a class="four">链接</a>
<a class="four-oo">链接</a>
</body>
</html>
动态伪类
:link :visited :hover :active :focus
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link{color:red;}
a:visited{color:blue;}
a:hover{color:orange;}
a:active{color:green;} input:hover{background-color: orange;}
input:focus{background-color: #abcdef;}
</style>
</head>
<body>
<a href="#">链接</a>
<br>
<input type="text">
</body>
</html>
UI元素状态伪类
:enabled :disabled :checked
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:enabled{background-color: red;}
input:disabled{background-color: orange;}
input:checked{width:100px;height:100px;}
</style>
</head>
<body>
<input type="text"><br>
<input type="text" enabled><br>
<input type="text" disabled><br>
<input type="checkbox" name="number" value="1">1
<input type="checkbox" name="number" value="2">2
<input type="checkbox" name="number" value="3">3
</body>
</html>
结构选择器
ele:first-child
满足某一个父元素的第一个子元素是指定元素
如section的第一个子元素，并且是div元素
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section>div:first-child{color:red;}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<section>
<p>1</div>
<div>2</div>
<div>3</div>
</section>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
</body>
</html>
:last-child :nth-child(n)同理
:nth-child(数字) 某个位置
:nth-child(n) 所有
:nth-child(odd) 奇数
:nth-child(even) 偶数
:nth-child(计算式) 指定计算式（n的取值从0开始）
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:nth-child(1){list-style: none;}
li:nth-child(n){font-weight:bold;}
li:nth-child(odd){color:pink;}
li:nth-child(even){color:#abcdef;}
li:nth-child(3n+1){text-decoration: underline;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
nth-last-child() 同理
nth-of-type() 计数时会跳过非指定元素
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:nth-child(4){color:orange;} /*li的父元素的第4个子元素，且为li*/
li:nth-of-type(4){background-color: #abcdef;}/* li的父元素的li子元素中的第4个*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>4</p>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
nth-last-of-type() 同理
first-of-type() last-of-type()
:only-child 作为唯一子元素
:only-of-type 指定类型的唯一子元素，可以有其他类型
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:only-child{color:orange;}
p:only-of-type{background-color: #abcdef;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>4</p>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul>
<p>1</p>
</ul>
</body>
</html>
css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类的更多相关文章
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- HTML[2种特殊选择器]_伪类选择器&属性选择器
本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3新增的属性选择器
使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...
随机推荐
- react FileReader读取TXT文件并保存 split切割字符串 map()分别渲染切割后的数组内的所有字符串
//class my_fileReader( e ) { console.log(e.target.files[0]); const reader = new File ...
- SpringBoot之切面AOP
SpringBoot提供了强大AOP支持,我们前面讲解过AOP面向切面,所以这里具体AOP原理就补具体介绍: AOP切面主要是切方法,我们一般搞一些日志分析和事务操作,要用到切面,类似拦截器: @As ...
- SVN本地服务器搭建及在Eclipse中的应用
0.说明在程序开发的时候会有很多的版本,通过手动备份的方式不紧麻烦而且低效易出错.使用SVN来管理版本会方便很多,虽然有一些学习成本,但是学会使用之后会使得开发更加的高效.本文介绍如何在本地搭建svn ...
- jsp简单实现交互
test.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- [转载]goldendict下优质词典简介及安装
使用Arch Linux一年以来,如果要问自己最为中意的词典程序是? 当然是Goldendict啦!想详细了解这款瑞士军刀的请猛戳这里. 以前在Win下都是用的lingoes, 感觉还不错,词典库很全 ...
- 真正解决百度编辑器UEditor上传图片跨域问题
做前后端分离的项目用到UEditor,把上传图片程序拿出来放到了接口程序中,上传图片接口已经做了跨域处理,按理说编辑器中上传图片应该不会有问题.可是配置好图片上传路径后,运行,打开调试,测试一下,报错 ...
- sqlserver partitition and partition table --- partition show
I can not believe that I had done this about two years Now we know there is totally different betwee ...
- 必知必会之Lambda表达式
Java是一门强大的面向对象的语言,除了8种基本的数据类型,其他一切皆为对象.因此,在Java中定义函数或方法都离不开对象,也就意味着很难直接将方法或函数像参数一样传递,而Java8中的Lambda表 ...
- 20200104--python学习第六天
今日学习 集合 内存相关知识 深浅拷贝 内容回顾与补充 (1)列表: (a)reverse 反转 v1=[1,2,3111,32,13] print(v1) v1.reverse() print(v1 ...
- Docker Compose 模板文件 V2
模板文件是使用Compose的核心,默认模板文件名称为docker-compose.yml ,格式为YAML格式. 目录结构 [root@localhost ~]# tree /opt/compose ...