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 &nbsp;

    <input type="checkbox" name="number" value="2">2 &nbsp;

    <input type="checkbox" name="number" value="3">3 &nbsp;

</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 ...

随机推荐

Prometheus学习笔记之教程推荐
最近学习K8S和基于容器的监控,发现了如下的教程质量不错,记录下来以备参考 K8S最佳实战(包括了K8S的Prometheus监控和EFK日志搜集) https://jimmysong.io/kube ...
Linux(Centos)安装Java JDK及卸载
步骤一.下载安装包 a. 因为Java JDK区分32位和64位,所以安装之前需先判断一下我们操作系统为多少位·,命令如下: uname -a 解释:如果有x86_64就是64位的,没有就是32位 ...
Arduino系列之按键模块（一）
今天我将简单介绍按键模块计数的原理: 我们常用的按键及按键模块有2脚和4脚的,其内部结构如图所示,当按下按键时就会接通按键两端,当放开时,两端自然断开. ...
Linux之时间同步操作
Linux之时间同步操作时间同步操作应用的命令 yum进行软件安装,软件安装过程中如遇到询问,一律选择y,ntp是时间同步命令 [root@localhost ~]# yum -y install ...
学过 C++ 的你，不得不知的这 10 条细节！
每日一句英语学习,每天进步一点点: “Action may not always bring happiness; but there is no happiness without action.” ...
keywords in my life
在脑子里出现的灵光一现的话语总是美好的: 1.当你试图站在人的发展,历史的发展的角度上看待问题,会发现我们身上所发生的任何事情都是必然的. 2.永远不要以好人的身份去看待和分析一件事情. 3.历史悲剧 ...
k8s系列----一个简单的例子
本实验来自k8s权威指南解决访问demo出错,关键是靠https://www.cnblogs.com/neutronman/p/8047547.html此链接下面的某个大神的评论主要yaml文件 ...
Vlan 间路由的方法
vlan间路由的方法主要有三种 1.通过路由器上多个接口实现 2.通过路由器上一个接口即单臂路由实现 3.通过三层交换实现下面将每一中实现方法配合实验说明第一:通过路由器上多个接口实现 ...
Vscode开发Python环境安装
VSCode 开发 Python 使用python,主要是做一些工具和爬虫的操作,语法简单,功能复杂,入手很快. 我们通过在 VSCode 中搜索 Python 插件,发现,开发 python 的话, ...
一键安装apache-2.4.38脚本
[root@lamp scripts]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [root@lamp scripts ...

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类的更多相关文章

随机推荐

热门专题