00、CSS选择器

CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器类选择器id选择器。伪类选择器就是元素的不同行为、状态,或逻辑。然后不同的选择器组合,基于不同的组合关系,产生了6中组合关系选择器。


01、基础选择器(5)

1.1、通配选择器:*{}

针对所有HTML标签全部适用,选择器名=星号*(通配符),一般只做初始化使用。在 CSS3 中,星号 (*) 可以和命名空间组合使用,如 ns|*{}

/* 通用选择器,针对所有标签 */
* {
color: black;
font-size: 15px;
box-sizing: border-box; margin: 0px; padding: 0px;
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
}

1.2、元素选择器:元素名{}

用元素名称作为选择器名称,如p、h1、div、img等,对作用域内所有该标签元素生效,所以常用来描述某一元素的共性

hr {
margin: 32px 5px;
}
h1 {
background-color: lightblue;
text-indent: 0.5em;
}

1.3、类选择器:.类名{}

定义时前面加点.类名,在标签的属性“class”使用该样式,这应该算是最常用的选择器了。

/* 类名class选择器 */
.particle{
font-size: 18px;
font-family: 楷体;
}
.pindent{
text-indent: 2em;
}
<p class="particle pindent">一段文字内容-section</p>

类选择器可以给所有需要的元素使用,可同时给多个元素使用,应用广泛。

  • 类名字母开头(小写),不能以数字开头。
  • 同一个标签可以用多个类选择器,空格隔开。基于此,一般会将样式抽象、分类为多个类样式,便于复用。

1.4、id选择器:#id{}

用标签的id作为选择器名称,加井号“#”,针对作用域内指定id的标签生效,所以只能使用一次。

  • ID是标签的唯一标识,不能重复。如果id重复,样式其实是会生效的,但查找元素(document.getElementById(id))只会返回第一个。
  • ID字母开头(小写),不能以数字开头。
/* id选择器 */
#a1{
color:blueviolet;
font-size: 16px;
text-decoration-line:underline ;
}

1.5、属性选择器:[属性=value]{}

元素都有属性,属性选择器是在其他选择器的基础上加上属性的筛选,用来筛选有特定属性、或属性值的元素,css3特性。这里的属性值匹配是大小写敏感的,结尾加上字符ili[title*= "a" i]),则会忽略大小写敏感。

属性选择器 示例 描述
[attr] li[title] .cli[title] 包含属性,筛选li元素且有属性title的元素
[attr=value] li[title="a"] 包含属性+值相等,筛选li元素+title属性,且值为“a”的元素
[attr^=value] li[title^= "a"] 属性值开头字符开头字符匹配
[attr$=value] li[title$= "a"] 属性值结尾字符结尾字符匹配
[attr*=value] li[title*= "a"] 属性值包含字符包含字符匹配
[attr~=value] li[title~="a"] 包含属性-值包含(完整单词),注意是值包含(如多个样式名,空格隔开的多个值),不是字符匹配包含,空格隔开的字符也算。
[attr|=value] li[title|="a"] 包含属性-值开头(完整单词),同上,属性值是a,或开始为a且后面跟连字符-(中划线)
<style>
li[title]{
color: red;
}
li[title="a"]{
font-weight: bold;
}
li[title~="a"]{
text-decoration: underline;
}
li[title|="a"]{
text-indent: 2em;
}
li[title^= "a"]{
text-shadow: 2px 2px 3px black;
}
li[title$= "a"]{
background: center url(../res/bimg.jpg);
}
li[title*= "a"]{
background-color: azure;
}
.cli[title]{
font-style: italic;
}
</style>
<ul>
<li title="a">item1:a</li>
<li title="a b">item2:a b</li>
<li title="c a b">item2</li>
<li title="a-b" class="cli">item4:a-b</li>
<li title="abc" class="cli">item5:abc</li>
<li title="cab" class="cli">item6:cab</li>
<li title="cba" class="cli">item7:cba</li>
<li title="cbA1" class="cli">item8:cbA1</li>
</ul>


02、伪类选择器(43)

2.1、伪类选择器:

伪类是选择器的一种,用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列,或者是当鼠标指针悬浮时的状态。

伪类选择器开头为冒号 ,如a:hover{} 表示a元素鼠标悬浮时的状态(样式)

和用户交互有关的伪类,也叫用户行为伪类,或叫做动态伪类,比如:link:active:visited:hover

交互状态伪类 描述(5)
:link 匹配未曾访问a链接。注意遵循 LVHA 的先后顺序:link >:visited > :hover > :active
:visited 匹配已访问a链接 (基于存在于浏览器本地的历史纪录),(visited /'vɪzɪtɪd/ 访问 )
:hover 鼠标悬浮时:当用户悬浮到一个元素之上的时候匹配。(/ˈhɒvə(r)/ 盘旋、悬停)
:active 鼠标按下时:在用户激活元素的时候匹配,一般被用在 <a><button> 元素
:focus IE8 得到焦点(光标):当一个元素有焦点的时候匹配,一般是输入表单。

注意顺序:先a样式,然后是他的LVHA。实际项目中,<a>:link:visited有时候会省略,合并到a样式中。

(表单)状态伪类 描述(11)
:read-only IE readonly:匹配用户不可更改的元素,具有 readonly 属性的<input> 元素,也包括不能被用户编辑的元素
:checked IE9 checked:匹配处于选中状态的radio(<input type="radio">)、checkbox<select>元素中的option
:disabled IE9 disabled:匹配被禁用的元素,如inputdisabled
:enabled IE9 启用状态:匹配处于开启状态的用户表单元素。
:required IE10 required:匹配设置了required必填的 表单元素,如设置了required属性的<input><select>, 或 <textarea>元素。效果同属性选择器input[required]
:optional IE10 required相反,没有设置必填(optional:/ˈɑːpʃən(ə)l/ ,可选的)
:in-range IE input.value:代表一个 <input type="number"> 元素,其当前值处于属性min 和max 限定的范围之内。
:out-of-range IE input.value:与:in-range相反,当值不在区间内的的时候匹配。
:invalid IE11 匹配内容未通过验证的 <input> 或其他 <form> 元素
:valid IE10 匹配内容验证正确的<input> 或其他 <form> 元素
:indeterminate IE10 表示状态不确定的表单元素,一般为复选框、单选框(一组都没有被选中)。( /ˌɪndɪˈtɜːrmɪnət/不确定的)
结构伪类/元素查找 描述(13)
:first-child IE7 匹配的元素&是其父元素的首个子元素,就是有2个条件,匹配冒号前的选择器+是其父元素的第一个子元素。
:last-child IE9 匹配的元素&是其父元素的最后一个子元素,匹配的元素必须是其父元素的最后一个元素
:first-of-type IE9 匹配的元素的第一个:匹配兄弟元素中第一个某种类型的元素,注意是兄弟元素的第一个
:last-of-type IE9 匹配的元素的最后一个:匹配兄弟元素中最后一个某种类型的元素。
:only-child IE9 匹配的元素的没有任何兄弟(也无子元素):没有任何兄弟(包括没匹配的),等效:first-child:last-child
:only-of-type IE9 匹配的元素的没有兄弟(无子元素):匹配兄弟元素中某类型仅有的元素,允许其他未匹配的兄弟元素。
:nth-child(2n+1) IE9 匹配的元素的按序号选择①所有兄弟元素按分组排序:首先找到所有兄弟元素(所有:包括其他未匹配的同级的兄弟元素),从1开始;②计算序号:参数为序号表达式(n=0/1/2...);③定位元素:只对匹配的元素生效
参数**n**:匹配序号1/2/3/4/5/6/7...自然数列;参数**3**:匹配序号3元素。(nth /enθ/ 第n个的,最近的)
参数**2n+1**:匹配序号1/3/5/7...奇数,=参数odd参数**2n**:匹配序号2/4/6/8...偶数,=参数even
● 如果序号是没有匹配的兄弟元素,当然就不生效了!没有匹配的兄弟元素只参与排序
:nth-of-type(2n+1) IE9 匹配的元素的按序号选择①匹配到的元素按分组排序②计算序号:参数为序号表达式(n=0/1/2...);③定位元素:只对匹配的元素生效。与:nth-child不同点是排序元素只有匹配的。
:nth-last-child IE9 匹配的元素的按倒序号选择:同:nth-child,所有兄弟元素排序从后往前
:nth-last-of-type IE9 匹配的元素的按倒序号选择:同:nth-of-type,匹配到的元素排序从后往前
:empty IE9 匹配没有子元素的元素:包括文本、换行都算是子元素,除了空格、注释。
:target IE9 当前锚点的元素,匹配当前URL指向的id值的元素:url#id
:root IE9 html根元素:匹配文档的根元素,就是html元素,常用于全局css变量申明。
逻辑条件伪类 描述(2)
:not (参数选择器) IE9 匹配不符合参数选择器所有元素,多个逗号隔开,不支持复杂的选择器
:is (参数选择器) IE 匹配指定选择器列表里的元素,多个逗号隔开,不支持复杂的选择器
其他伪类 (4)
@page :first 打印文档的时候,第一页的样式
@page :left 打印文档的左侧页设置 CSS 样式,和@page 配套使用
@page :right 打印文档的所有右页,和@page 配套使用
:lang 基于语言(HTMLlang属性的值)匹配元素。语言是通过lang 属性,和 <meta> 元素的组合来决定的

表单文本框的校验状态样式示例:

<style>
:root {
/*申明css全局变量*/
--error-color: red;
}
#vtag input:required+label::before{
content: "*";
color:var(--error-color);
}
#vtag input:in-range{
border:green 1px solid;
color: green;
margin: 20px 0;
}
#vtag input:out-of-range{
border:red 1px solid;
color:var(--error-color);
margin: 20px 0;
}
#vtag input:out-of-range+label::after{
content: ",值必须在1到10之间";
color:var(--error-color);
}
</style> <div id="vtag">
年龄:
<input type="number" value="13" id="t3" name="t3" min="1" max="10" required>
<label for="t3"></label>
</div>

表格结构选择类样式:表头高亮样式;隔行换色,第一列高亮+排名次

<style>
#vtb{
border-collapse: collapse;
width: 300px;
text-align: center;
border: 2px black solid;
}
#vtb tr:first-child th{ /*标题行样式*/
background-color:blueviolet;
font-weight: bold;
color: white;
}
#vtb tr:nth-of-type(2n+2){ /*隔行换色*/
background-color: rgb(197, 239, 245);
}
#vtb tr:nth-of-type(2n+3){
background-color: rgb(230, 245, 201);
}
#vtb tr td:first-child{ /*第一列的样式*/
font-weight: bold;
color: blue;
background-color: lightpink;
text-align: left;
text-indent: 3px;
}
#vtb tr:nth-of-type(2) td:first-child::before{ /*添加排名序号*/
content: "";
}
#vtb tr:nth-of-type(3) td:first-child::before{
content: "";
}
#vtb tr:nth-of-type(4) td:first-child::before{
content: "";
}
</style>
<!-- 表格效果:表头高亮样式;隔行换色,第一列高亮+排名次 -->
<table id="vtb" border="1">
<tr>
<th>姓名</th><th>分数</th><th>学号</th>
</tr>
<tr>
<td>张三</td><td>r1-2</td><td>r1-3</td></tr>
<tr>
<td>周伦</td><td>r2-2</td><td>r2-3</td>
</tr>
<tr>
<td>李子柒</td><td>r3-2</td><td>r3-3</td>
</tr>
<tr>
<td>王小二</td><td>r4-2</td><td>r4-3</td>
</tr>
</table>

2.2、伪元素选择器::

伪元素,顾名思义,像元素但不是真正的元素。基于一些预定的规则,像一个新的元素一样的虚拟元素,如段落中的第一行。

伪元素用双冒号开头 ::,如p::first-line{},不过有早期版本的伪元素是单冒号开头的。

伪元素选择器 描述(8)
::after IE9 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before IE9 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter IE9 匹配元素的第一个字符。
::first-line IE9 匹配元素的第一行。
::selection 被选中:匹配文档中被选择的那部分,可用来自定义文本选中样式
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。
::placeholder IE 表单元素的占位文本placeholder

️可插入内容::before ::after 伪元素,是一组特别的伪元素,配合content属性,可用css插入(文本)内容(插入的内容不可选中)。

<style>
#vtag p:first-child::first-letter {
font-size: 200%;
}
#vtag p:first-child::first-line {
color: red;
}
/* 插入内容并设置其样式(无法选中) */
#vtag p:first-child::after {
content: "——《四书五经》";
color: cornflowerblue;
font-size: 80%;
}
/* 设置文字选择状态样式 */
#vtag p::selection{
color:white;
background-color: #ff0000;
}
</style>
<div id="vtag">
<p>出必告,反必面,居有常,业无变。</p>
<p>湖畔大学的梁宁曾说过:「要找到那件能让你一直不厌其烦做下去的事,你不厌其烦的地方,就是你的天分所在。追随内心,做自己喜欢的事,时间久了,你就会成功。」</p>
</div>


03、组合关系选择器(6)

3.1、合并/并集选择器:逗号

多种基础选择器的合并组合,相当于大家共用一个样式设置,选择器名字用逗号,隔开。

选择器1, 选择器2, 选择器3, ... { } 例如:div, #su1, .user{...}

<style type="text/css">
pre, /* 标签名选择器 */
#a1, /* id选择器 */
.f1 /* 类名class选择器 */
{
color: skyblue;
font-weight: bold;
}
</style>

3.2、交集选择器:紧密相连

多个选择器拼接,中间无任何连接符(利用选择器本身的前缀分割),不能有空格,选择 都同时满足的元素。

选择器1选择器2选择器3... { }

a.nav.left[href]{
background-color: #0000ff;
}
.form-float a.nav{ /*两个交集,组合成一个后代选择器*/
color: white;
}

3.3、后代选择器:空格

空格分割,选择指定元素的** 符合选择器条件 **的 所有后代 元素,注意这里的“后代”,即所有子元素都是筛选目标,不限等级,可跨级。支持多个层级,从第一个选择器(祖父)的开始,一直往下递归,所有符合条件的后代,最后一个选择器为目标元素。

祖父 后代1 后代2 ... 后代n(递归后代n) { }

<style>
.f1 p{
color: red;
}
.f1 .f2 p{
font-weight: bold;
}
</style>
<div class="f1">
<p class="f2">子代</p>
<div class="f11">
<p>孙代</p>
<div class="f111">
<p>曾孙</p>
</div>
</div>
<div class="f2">
<p>孙代2</p>
</div>
</div>

3.4、子代选择器:大于号>

用大于号>分割,查找指定元素的子元素&第一代(儿子)元素中符合所有条件的元素。不同于后代选择器,只在第一代中找。

父>后代1>后代2>...>后代n { }

.f1>p{
background-color: antiquewhite;
}
.f1>.f2>p{
text-indent: 2em;
}

3.5、相邻兄弟选择器:加号+

用加号+分割,查找指定元素相邻&同级后一个指定元素,二者有相同的父元素且相邻,中间不可间隔。只向后找一个,要求有点多。

胸弟1+兄弟2+...+兄弟n(第一个兄弟n) { }

.fb2+.fb3{
font-weight: bold;
}
.fb2+p+p{
color: red;
}
<div class="fb1">
<p class="fb2">子代</p>
<p class="fb3">兄弟1</p>
<p class="fb4">兄弟3</p>
<div class="fb11">
<p>孙代</p>
<div class="fb111">
<p>曾孙</p>
</div>
</div>
<p class="fb2">兄弟3</p>
</div>

3.6、普通兄弟选择器:波浪线~

用波浪线~分割,查找指定元素同级所有指定兄弟元素,有相同的父元素,符合条件的都会被找出来。不同于相邻兄弟选择器,不用相邻,多个结果。

兄弟1~兄弟2~...~兄弟n(所有同级兄弟n) { }

.fb2~p{
text-indent: 1em;
}
.fb2~.fb3~p{
text-indent: 2em;
}


️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址-语雀

CSS选择器大全48式的更多相关文章

  1. jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...

  2. 转:jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  3. css选择器大全

    1.元素选择器 这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;} //设置p元素行高1.5em,距 ...

  4. CSS 选择器大全

    在CSS中,选择器是用于选择要设置样式的元素的模式. 选择器 例子 描述 .class .intro 选择class=“intro”的所有元素 #id #firstname 选择id=“firstna ...

  5. CSS:选择器大全

    一.概念: CSS主要的作用就是给网页中的dom元素设置样式,选择器则是用来匹配dom元素的. CSS中的选择器有很多种,常用的分别是标签选择器(根据元素标签名称),类选择器(根据元素class属性) ...

  6. css笔记02:选择器(标签式和类)

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  7. CSS选择器操作大全

    一,CSS选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选 ...

  8. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. numa 自动balance 的bug分析

    关于migrate_swap() 和 active_balance()之间的hardlock 背景:这个是在3.10.0-957.el7.x86_64 遇到的一例crash 下面列一下我们是怎么排查并 ...

  2. 【C标准库】详解feof函数与EOF

    创作不易,多多支持! 再说此函数之前,先来说一下EOF是什么 EOF,为End Of File的缩写,通常在文本的最后存在此字符表示资料结束. 在C语言中,或更精确地说成C标准函式库中表示文件结束符. ...

  3. rh358 002 fact变量获取 ansible配置网络 service_facts

    通过ansible 获取网络信息 1.如何获取fact事实变量 方式1: ansible servera -m servera 方式2: 剧本 [root@workstation ansible]# ...

  4. Apache DolphinScheduler 简单任务定义及复杂的跨节点传参

    ​ 点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler Apache DolphinScheduler是一款非常不 ...

  5. windows下Inno Setup打包

    基于inno setup的windos打包,主要脚本语言inno script.下载地址:https://jrsoftware.org/isdl.php相关打包教程:https://blog.csdn ...

  6. Linux 更换国内源

    1.事件背景 事情起因是因为我想安装xvfb,执行sudo apt-get install xvfb发现安装报错,看报错原因是被墙导致,因为我用的默认源也没有挂代理:然后就百度,发现都是互相抄,什么换 ...

  7. KingbaseFlySync V1R6 管控平台Linux命令行安装

    关键字: KingbaseFlySync.KingbaseES.Linux.x86_64.mips64el.aarch64.Java 管控平台: Web管控平台(Manager.Console.Com ...

  8. Java代码审计之不安全的Java代码

    Java代码审计之不安全的Java代码 ​ 在打靶场的同时,需要想一下如果你是开发人员你会怎样去防御这种漏洞,而作为攻击方你又怎么去绕过开发人员的防御. 环境搭建 https://github.com ...

  9. 6、Arrays类

    Arrays类 Arrays里面包含了一系列静态方法,用于管理或操作数组(比如排序和搜索) 常用方法 toString 返回数组的字符串形式 Arrays.toString(arr) Integer[ ...

  10. Dockerfile中ADD命令详细解读

    ADD指令的功能是将主机构建环境(上下文)目录中的文件和目录.以及一个URL标记的文件 拷贝到镜像中. 其格式是: ADD 源路径 目标路径 #test FROM ubuntu MAINTAINER ...