后代选择器

祖先元素 后代元素{ }

子元素选择器（直接子元素选择器）

父元素>子元素{ }

兄弟选择器

元素+兄弟元素（紧邻该元素之后的下一个兄弟元素）

所有兄弟元素选择器

元素~兄弟元素（该元素之后的所有兄弟元素）

<!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状态伪类+结构类的更多相关文章

  1. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  3. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  4. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  5. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  6. 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  7. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  8. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  9. css3新增的属性选择器

    使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...

随机推荐

  1. Redis | 使用redis存储对象反序列化异常SerializationFailedException

    案例 使用Redis进行对象存储,在处理业务逻辑的时候,丛Redis获取对象发现反序列化失败,抛出如下异常: Caused by: org.springframework.data.redis.ser ...

  2. npm、node版本升级与淘宝镜像

            npm --version  ==   npm -v       查看npm版本            node -v  查看node版本         升级npm版本   npm  ...

  3. 基于Arduino开发的简易“高水位报警系统解决方案”

    长期以来,针对“某些办公室空调没有排水系统,只能用水桶接水,经常造成水漫金山的问题”而提出来的. 材料:Arduino开发板一块.水位传感器一个.高电平蜂鸣器一个.杜邦线若干. 原理:将水位传感器置于 ...

  4. 安卓开发实战-记账本APP（五）

    今天将昨天剩余的bug修复,并且完成图标的美化,设置长按删除,模仿支付宝实现金额的动态增加. ①将昨天的布局进行了修改:之前是fragment,改成FrameLayout布局,不再设置name,进而在 ...

  5. python中更人性化的一个单元测试框架：nose2

    如果你学过 python 进行自动化测试,你一定使用过 unittest.今天我们要讲的 nose2 是一个高级版本的 unittest.他比 unittest 更容易理解,用起来也更加方便一些. 快 ...

  6. Go语言实现：【剑指offer】整数中1出现的次数（从1到n整数中1出现的次数）

    该题目来源于牛客网<剑指offer>专题. 求出1 ~ 13的整数中1出现的次数,并算出100 ~ 1300的整数中1出现的次数?为此他特别数了一下1 ~ 13中包含1的数字有1.10.1 ...

  7. 基于MySQL+MHA+Haproxy部署高可用负载均衡集群

    一.MHA 概述 MHA(Master High Availability)是可以在MySQL上使用的一套高可用方案.所编写的语言为Perl 从名字上我们可以看到.MHA的目的就是为了维护Master ...

  8. VFP 图形文件与剪切板互换的API解决方法

    在 VFP 中,凡遇图形处理,大多数情况下,都会涉及到图形文件与剪切板互换的情况.下面给出利用 API 解决的方法.这是原来从网上摘下来的,版权归原作者.基本处理的代码如下,你可以将其应用到你的代码中 ...

  9. Transformer 详解

    感谢:https://www.jianshu.com/p/04b6dd396d62 Transformer模型由<Attention is all your need>论文中提出,在seq ...

  10. vi/vim编辑器操作梳理

    1. vi/vim编辑器详细使用讲解 1.1 vi/vim编辑器的3种模式 1.2 vi/vim编辑器操作说明 参数/命令/模式 说明 ###普通模式   :set nu  显示行号 :set non ...