后代选择器

祖先元素 后代元素{ }

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

父元素>子元素{ }

兄弟选择器

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

所有兄弟元素选择器

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

<!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性能测试结果（1个集合存300万数据，查询能几秒返回结果）

    现状: 1.买了一台主从的阿里云Redis,内存就1GB. 2.查询了阿里云的帮助,没有找到性能相关的说明, 有的也是4GB版本的并发性能 3.提工单问客服 一个集合里有300万数据,单次查询性能大概 ...

  2. 中国天气网API接口

    http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.h ...

  3. android实例 listview与sqlite数据绑定

    ListView与Sqlite数据库绑定步骤: 1.将Sqlite数据库的内容查询出来并放入数组列表中,形成ListView的数据源: 2.适配器绑定数据源,显示在ListView item中. 本文 ...

  4. LeetCode 664. Strange Printer 奇怪的打印机(C++/Java)

    题目: There is a strange printer with the following two special requirements: The printer can only pri ...

  5. 《Android Studio实战 快速、高效地构建Android应用》--四、Git入门

    Git版本控制系统(VCS)是分布式的,仓库的每一个副本均包含项目的完整历史 安装Git 下载 下载地址:http://git-scm.com/downloads 选择适合自己操作系统的来下载 如果下 ...

  6. LeetCode227：基本计算器II

    感觉自己的思路还不错,比较简单清晰,代码量也比较少,没有用到记录运算符的变量或栈,就想把这个思路发一下博客. 题目: 实现一个基本的计算器来计算一个简单的字符串表达式的值. 字符串表达式仅包含非负整数 ...

  7. content-type常见类型辨析(以ajax与springmvc前后端交互为例)

    博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...

  8. .NET Core WebAPI post参数传递时后端的接收方式

    .NET Core WebAPI post参数传递时后端的接收方式 实体类 dynamic动态类型 JObject参数 单值参数(字符串参数) A.前端Post请求代码 $.ajax({ url: & ...

  9. 检测并移除WMI持久化后门

      WMI型后门只能由具有管理员权限的用户运行.WMI后门通常使用powershell编写的,可以直接从新的WMI属性中读取和执行后门代码,给代码加密.通过这种方式攻击者会在系统中安装一个持久性的后门 ...

  10. 深入理解JVM(二)--垃圾收集算法

    一. 概述 说起垃圾收集(Garbage Collection, GC), 大部分人都把这项技术当做Java语言的伴随生产物. 事实上, GC的历史远远比Java久远, 1960年 诞生于MIT的Li ...