后代选择器

祖先元素 后代元素{ }

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

父元素>子元素{ }

兄弟选择器

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

所有兄弟元素选择器

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

<!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. vue计算属性和方法的区别

    计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...

  2. Linux驱动管理

    一.驱动更新 本示例为更新网卡驱动,把新的驱动文件放到/root/目录下,然后执行下面的命令 备份已有的文件,将新的文件复制的相应位置 mv /lib/modules/`uname -r`/kerne ...

  3. Dockers 部署 MongoDB + mongo-express

    1. 拉取 Mongo 镜像 docker pull mongo: 2.  运行镜像 docker run -d --name mongodb --volume /usr/local/mongodat ...

  4. hashmap 的边遍历边存储

    PS: Hashmap 的一边遍历边存储,可解决例如两数之和. 无重复最长子串问题等,代码为cpp格式. 以无重复最长子串为例. class Solution { public: int length ...

  5. django中navie time 和 aware time的使用和转换

    在django中有关时间被分为navie time 和 aware time两种,前者指的是不带时区标记的时间格式,后者被认为是带有时区标记的时间格式.在django框架的setting.py文件中 ...

  6. c++中各类型数据占据的字节长度

    c++中各种类型数据类型占据字节长度 首先罗列一下C++中的数据类型都有哪些: 1.整形:int.long 2.字符型:char.wchar_t 3.布尔型:bool 4.浮点型:float.doub ...

  7. Spring-cloud微服务实战【八】：API网关zuul

      在前面的文章中,我们先后使用了eureka/ribbon/feign/hystrix搭建了一个看似完美的微服务了,那是否还有值得继续优化的地方呢?答案肯定是有的,如果从整个微服务内部来看,基本已经 ...

  8. reload重载配置文件的真相

    02检查配置文件语法也就是说在重载nginx配置文件之前,不是必须使用nginx -t检查语法 03修改配置文件,新开启端口,比如443,所以需要打开新的监听端口 04使用新配置启动新的worker子 ...

  9. 如何播放 WAV 文件？

    from http://www.vckbase.com/index.php/wv/434 平时,你在多媒体软件的设计中是怎样处理声音文件的呢?使用Windows 提供的API函数 sndPlaySou ...

  10. AD域SSP安全防护

    一.简介 SSP(Security Support Provider)是windows操作系统安全机制的提供者.简单的说,SSP就是DLL文件,主要用于windows操作系统的身份认证功能,例如NTL ...