CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器

接上一篇 CSS(CSS3)选择器(1)

一.通用兄弟选择器:

                        24:E ~ F,匹配任何E元素之后的同级F元素。

div ~ p{
    background-color:#00FF00;
}

二.属性选择器:

                        25:E[att ^= val],匹配属性att的值以”val“开头的元素。

[id ^= start]{
    background-color:red;

]
/*匹配以id属性的值为start开头的,如id="start1",id="start2",id="start3"的元素*/

                        26:E[att $= val],匹配属性att的值以”val“结尾的元素。

[id $= end]{
    background-color:red;

]
/*匹配以id属性的值为end结尾的,如id="1end",id="2end",id="3end"的元素*/

                        27:E[att *= val],匹配属性att的值包含”val“字符串的元素。

[id $= hass]{
    background-color:red;

]
/*匹配以id属性的值包含hass的,如id="1hass",id="hass2",id="3hass444"的元素*/

三.结构性伪类选择器:

                        28:E:root,匹配文档的根元素,对于HTML文档,就是HTML元素。(也就是说可能存在其他文档形式时使用,选中的是该文档类型的根元素)

:root{
    background:red;
}
/*经测试,像div:root这样的写法是无效的*/

                        29:E:not,匹配不符合当前选择器的任何元素。

h1:not(.name) {
    color: red;
}
/*其含义是,匹配所有h1元素的类名不为name的h1元素,如果:not选择器前面不带指明的元素是无效的*/

                        30:E:empty,匹配一个不包含任何子元素的元素,包括文本节点

.box:empty{
    background:pink;
}

                        31:E:target,匹配文档中特定”id“,点击后的效果。

:target{
    background: red;
}
/*通常用于锚点定位后,定位的目标点样式*/

                        32:E:last-child,匹配父元素的最后一个子元素。

li:last-child{
    background-color:red;
}

                        33:E:nth-child(n),匹配其父元素的第n个子元素,从1开始。

li:nth-child(2){
    background-color:red;
}

                        34:E:nth-last-child(n),匹配其父元素的倒数第n个子元素,倒数第一个的index为1。

li:nth-last-child(2){
    background-color:red;
}

                        35:E:nth-of-type(n),与:nth-child()作用类似,但是仅匹配同类型的元素。

h2:nth-of-type(odd){
    background:red;
}

                        36:E:nth-last-of-type(n),与:nth-last-child() 作用类似,但是仅匹配同类型的元素。

h2:nth-last-of-type(even){
    background:red;
}

                        37:E:first-of-type,匹配父元素下使用同种标签的第一个子元素。

h2:first-of-type{
    background-color: yellow;
}

                        38:E:last-of-type,匹配父元素下使用同种标签的最后一个子元素。

h2:last-of-type{
    background-color: yellow;
}

                        39:E:only-child,匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。

li:only-child{
    background-color: yellow;
}

                        40:E:only-of-type,匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。

li:only-of-type{
    background-color: yellow;
}

四.UI元素状态伪类选择器:

                        41:E:enabled,匹配表单中激活的元素。

input[type="text"]:enabled{
    background-color:yellow; 
}

                        42:E:disabled,匹配表单中禁用的元素。

input[type="text"]:disabled{
    background-color:purple;
}

                        43:E:read-only,指定当元素处于只读状态时的样式。

input[type="text"]:read-only{
        background-color: gray;
}

                        44:E:read-write,指定当元素处于非只读状态时的样式。

input[type="text"]:read-write{
        background-color: greenyellow;
}

                        45:E:checked,匹配表单中被选中的radio(单选框)或checkbox(复选框)元素。

input[type="checkbox"]:checked {
    outline:2px solid blue;
}

                        46:E:default,指定但页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框的选取状态设定为非选取状态,该样式仍然有效。

input[type="checkbox"]:default {
    outline:2px solid  blue;
}

                        47:E:indeterminate,指定当页面打开时,一组单选框中没有任何一个单选框被设定为选取状态时,整组单选框的样式,如果用户选取了任何一个单选框,那么该样式则取消。

input[type="radio"]:indeterminate{
        outline: solid 3px blue;
}

                        48:E::selection,用来指定该元素处于选中状态时的样式。

p::selection{
    background:red;
    color:#FFF;
}
input[type="text"]::selection{
    background:gray;
    color:#FFF;
}

                        49:E:invalid,用来指定元素的内容无法通过H5元素的属性所指定的检查(required)或元素的内容不符合规定的格式(type=Email等)。

input[type="text"]:invalid{
    background-color: red;
}

                        50:E:valid,用来指定元素的内容可以通过H5元素的属性所指定的检查(required)或元素的内容不符合规定的格式(type=Email等)。

input[type="text"]:valid{
    background-color: white;
}

                        51:E:required,用来指定允许使用required属性,并且已经指定了required属性的input,select,textarea元素的样式。

input[type="text"]:required{
    border-color: red;
    border-width:3px;
}

                        52:E:optional,用来指定允许使用required属性,并且未指定了required属性的input,select,textarea元素的样式。

input[type="text"]:optional{
    border-color: black;
    border-width:3px;
}

                        53:E:in-range,用来指定当元素的有效值被限定在一定范围之内(通常通过min属性值或者max属性值来限定),且实际输入值在该范围内时使用的样式。

input[type="number"]:in-range{
    background-color: white;
}

                        54:E:out-of-range,用来指定当元素的有效值被限定在一定范围之内(通常通过min属性值或者max属性值来限定),且实际输入值不在该范围内时使用的样式。

input[type="number"]:out-of-range{
    background-color: red;
}

                        55:E::placeholder,用来改变文字占位符的样式。

input::placeholder{
    color:red;
}

至此,CSS(CSS3)选择器的简单说明笔记就到这里结束了,其实这些内容包含了CSS(CSS3)世界的绝大多数常用选择器,当然,还有些不常用的如果大家有兴趣,可以自行搜索资料。

参考:css选择器笔记30个你必须熟记的css选择器MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1243
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

4569
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

771
来自专栏calmound

JavaScript基础2---控制权DOM操作

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素,属性和文本的树结构(...

3454
来自专栏AndroidTv

前端入门3-CSS基础声明正文-CSS基础

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

922
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

3418
来自专栏专业duilib使用+业余界面开发

duilib自绘

2073
来自专栏SpringBoot

Jquery入门

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Br...

1552
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

3437
来自专栏互联网软件技术

添加标签——无给定标签选项

1283

扫码关注云+社区

领取腾讯云代金券