【css选择器】

懵鸡相伴的憨憨

已于 2022-12-22 23:43:42 修改

阅读量118

点赞数

分类专栏：前端文章标签： css 前端

于 2022-12-22 22:55:21 首次发布

本文链接：https://blog.csdn.net/weixin_62198015/article/details/128414206

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

选择器的作用

在CSS中，我们使用选择器来选中HTML文档中的元素；

在编写样式时，我们会以一个或一组选择器为开始，去告诉浏览器应该将样式应用到哪些元素上

选择器的分类

基本选择器

标签选择器

a{
    font-size:20px;
}

id选择器

#root{
    background:'red';
}

class类选择器

.title{
    text-align:center;
}

通配符选择器

*{
    margin:0;
    padding:0;
}

层次选择器

后代选择器

#root div{
    display:'none';
}

子代选择器

ul>li{
    list-style:'none';
}

相邻同胞选择器

.nav1+.nav2{
    background:'pink';
}

通用同胞选择器

.nav1~.nav2{
    line-height:50px;
}

集合选择器

并集选择器

html,body{
    height:100%;
}

交集选择器

ul.pic{
    width:100px;
    height:100px;
}

条件选择器

指定标记语言的元素 :lang

指定书写方向的元素 :dir()

包含指定元素的元素 :has

指定条件的元素 :is

非指定条件的元素 :not

指定条件的元素 :where

指定元素作为参考点 :scope

所有包含href的链接元素 :any-link

所有包含href且属于绝对地址的链接元素 :local-link

行为选择器

鼠标激活的元素 :active

鼠标滑过的元素 :hover

鼠标选中的元素 ::selection

状态选择器

当前锚点的元素 :target

未访问的链接元素 :link

已访问的链接元素 :visited

输入聚焦的表单元素 :focus

输入必填的表单元素 :required

输入合法的表单元素 :valid

输入非法的表单元素 :invalid

输入范围以内的表单元素 :in-range

输入范围以外的表单元素 :out-of-range

选项选中的表单元素 :checked

选项可选的表单元素 :optional

事件启用的表单元素 :enable

事件禁用的表单元素 :disable

只读的表单元素 :read-only

可读可写的表单元素 :read-write

内部锚点元素处于激活状态的元素 :target-within

内部表单元素处于聚焦状态的状态 :focus-within

输入聚焦的表单元素 :focus-visiable

输入为空的表单元素 :blank

输入合法的表单元素 :user-invalid

选项未定义的表单元素 :indeterminate

占位显示的表单元素 :placeholder-shown

浏览中的元素 :current()

已浏览的元素 :past()

未浏览的元素 :future()

开始播放的媒体元素 :playing

暂停播放的媒体元素 :paused

结构选择器

文档的根元素 :root

无子元素的元素 :empty

元素的首字母 :first-letter

元素的首行 :first-line

元素中指定顺序索引的元素 :nth-child(n)

元素中指定逆序索引的元素 :nth-last-child(n)

元素中为首的元素 :first-child

元素中为尾的元素 :last-child

父元素仅有该元素的元素 :only-child

标签中指定顺序索引的标签 :nth-of-type(n)

标签中指定逆序索引的标签 :nth-last-of-type(n)

标签中为首的标签 :first-of-type

标签中为尾的标签 :last-of-type

父元素仅有该标签的标签 :only-of-type

属性选择器

指定属性的元素 [attr]

属性等于指定值的元素 [attr=val]

属性包含指定值的元素 [attr*=val]

属性以指定值开头的元素 [attr^=val]

属性以指定值结尾的元素 [attr$=val]

伪类选择器

在元素前插入的内容 ::before

在元素后插入的内容 ::after

优先级划分

内联 > ID选择器 > 类选择器 > 标签选择器

调整优先级的方法

!important

可以继承的CSS属性

font:组合字体;
font-family:规定元素的字体系列;
font-weight:设置字体的粗细;
font-size:设置字体的尺寸;
font-style:定义字体的风格;
font-variant:偏大或偏小的字体;

text-indent：文本缩进;
text-align：文本水平对齐;
line-height：行高;
word-spacing：增加或减少单词间的空白;
letter-spacing：增加或减少字符间的空白;
text-transform：控制文本大小写;
direction：规定文本的书写方向;
color：文本颜色;

visibility;

caption-side：定位表格标题位置;
border-collapse：合并表格边框;
border-spacing：设置相邻单元格的边框间的距离;
empty-cells：单元格的边框的出现与消失;
table-layout：表格的宽度由什么决定;

list-style-type：文字前面的小点点样式;
list-style-position：小点点位置;
list-style：以上的属性可通过这属性集合;

quotes：设置嵌套引用的引号类型;

cursor：箭头可以变成需要的形状;