css样式选择器

原创已于 2024-10-20 21:51:12 修改 · 588 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

于 2024-10-20 21:07:13 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

css样式选择器

css样式表，按照文档加载css样式顺序：相同情况下后来者覆盖前者

css样式选择器：

全局选择器： *{xxx}
元素选择器  
类选择器 .clazz{xx}
ID选择器  #id {xxx}
属性选择器
伪类选择器
伪元素选择器

选择器组合

并集

逗号相连(匹配所列元素) ：.hobby.career{}

交集

多个选择器直接相连(不能有空格)：

p.title{匹配p标签带有.title的选择器}
// (元素必须在开头)

后代

[后代选择器：表示递进匹配后代]
多个选择器空格隔开：ul li a{ul中li中的a元素 }

子代

使用>号相连
div>span{给div标签里所有的子级span元素设置样式}

兄弟

相邻兄弟选择器-使用+号相连[向后匹配相邻第一个同级元素；]
div+span{给div的相邻同级的span设置样式}
通用兄弟选择器-使用~号相连[向后匹配所有同级元素；]
div~span{给div后所有同级的span设置样式}

属性选择器

使用中括号:[属性名] 来匹配元素
1.匹配含有属性的元素
[title] 匹配含有title属性的元素
2.匹配属性和值
[title="project"] 匹配含有title属性且其值=project
3.匹配属性且其值以某开头^
[title^="p"] 匹配含有title属性且其值以p开头的元素
4.匹配属性且其值以某结尾$
[title$="e"] 匹配含有title属性且其值以e结尾
5.匹配属性且其值包含某*
[title*="t"] 匹配含有title属性且其值含有t的元素

伪类选择器

不是真正的类选择器，类似于给状态变化前后或指定位置的元素设置样式

动态伪类

例如：a标签：点击前的样式选择器 使用 a:link， 
		点击后的选择器a:visited 
		鼠标悬浮a:hover
		鼠标击中未松开的选择器：a:active 
		以上a的伪类按以上固定顺写样式
	其中，:link,:visited是a标签独有的，
	其它：input:focus 获取焦点 - 表单类元素独有
			input:focus,select:focus{xxx}
	UI伪类：input[type=checkbox]:checked{选中后的样式}

结构伪类

位置筛选：

:first-child
匹配到元素且该元素是所在同级兄弟元素中的第一个 (即是所在父级的第一个子元素)->
:last-child
与上相反
:only-child
匹配到元素且该元素的同级元素中只有它自己
:nth-child(3)
匹配到元素且该元素是所在同级兄弟元素中的第3个
括号内取值从0开始,填0代表都不匹配,填n代表匹配全部,
括号内支持表达式(2n)表示偶数,(2n+1)表示奇数等价于(even)和(odd)
公式(an+b) (-n+5)表示前5个,(-10+5,-1+5,-2+5,-3+5,-4+5,-5+5)
(3n+1)表示(30+1,31+1,32+1,3*3+1,…))
:nth-last-child(3) 倒数第3个

e.g.

div>p:first-child{}
<div>
	<!--:first-child时div下p且该p是所在同级中第一个-->
	<p>99分</p>
	<p>97分</p>
	<p>96分</p>
</div>
div li:first-child {
	/*
	匹配div后代中li且li是所在同级兄弟元素中第一个
	*/
	color: #d61d1d;
}
<div class="struct-wl">
	<li>第一名100分(-结构伪类选中-该li是div下同级兄弟元素中的第一个元素)</li>
	<label>打扰标签</label>
	<ul>
		<li>第一名100分(-结构伪类选中-该li是ul下同级兄弟元素中的第一个元素)</li>
		<li>第三名99分(未匹配选中)</li>
	</ul>
	<li>第四名98分(未匹配选中)</li>
	<li>第五名97分(匹配选中nth-child(5))</li>
	<li>第六名96分(未匹配选中)</li>
</div>

:first-of-type
匹配到元素且该元素是所在同级兄弟中同类型元素的第一个 (即是所在父级的第一个相同子元素)->
与:first-child不同之处是计算的是同级元素中相对同类元素所处的位置,
以下同理
:last-of-type 最后一个同类元素
:only-of-type
匹配到元素且该元素的同级相同类型元素中只有它自己
:nth-of-type(2n+1)
:nth-last-of-type(3) 倒数第3个同类型
:root等价于html标签选择器

:empty匹配元素内部是空的

div:empty{
	/*给div没有内容(也不能有空格)的元素设置样式*/
	width: 100px;
	height: 100px;
	background-color: #53df0d;
}

否定伪类

:not(.fail) 匹配元素但排除class=fail
:not([title^="abcd"]) 匹配元素但排除属性title="abcd开头"的
div>li:not(:first-child) 匹配元素但排除第一个在第一位的li

UI伪类

:checked 选中后的样式
	input[type=checkbox]:checked{选中后的样式}	
:disabled{被禁用的input元素样式}
	input:disabled{xxx}
:enabled{可用的input元素样式}
	input:enabled{xxx} 等价与input{}

目标伪类

:target{样式}
<a href="#one">跳至id="one"的锚点元素时，该元素应用样式

语言伪类

:lang(en){lang="en"英文的样式}
:lang(zh-CN){简体中文的样式}

伪元素选择器

没有元素类似元素，大多为选中元素中的一些特殊位置
伪元素使用：两个冒号+伪元素名

div::first-letter{选中第一个文字}
div::first-line{匹配第一行文字样式}

::selection{鼠标选中时文字样式}

::selection{
	background-color: #08d23b;
	color: orange;
}

input:placeholder{输入框提示效果}
```
input::placeholder{
	color: skyblue;
}
```

p::before{} 匹配在元素开始位置，创建一个子元素,样式内必须content指定内容

.selector-wys>li::before{
	/*选中元素并在内容前加入content的值*/
	content: "￥";
}

::after{} 匹配在元素最后位置，创建一个子元素,样式内必须content指定内容
/*选中元素并在内容后加入content的值

选择器优先级

前情回顾：
1. 行内优先>内部样式>外部(同类选择器情况下)
2. 后加载优先于先加载(同类选择器情况下)
3. 元素选择器优先于通配选择器
4. id选择器>类选择器>元素选择器>通配>
5. !important 当样式属性值加上该后缀该属性优先级超过其它样式最大
举例：如果设置同样的样式属性：
外部样式是用id选择器，内部是元素选择器，那么也是id>内部
计算权重-推导优先级
格式(a,b,c)
a->ID选择器个数
b->类,伪类,属性 ,选择器个数
c->元素,伪元素 ,选择器个数
a权重>b权重>c权重
先比较双方a的数量,多者胜;相同则比较b是数量,多者胜;相同再c
案例：
```
.container span.slogan{
	color: red;
}
/*x1=比重为(0,2,1)*/

div>p>span:nth-child{
	color: green;
}
/*x2=比重为(0,1,3)*/
```
比较x1.b>x2.b 所以第一个选择器优先级更大

CSS三大特性

1层叠性
	样式发生冲突，根据一定的规则(优先级)进行样式层叠覆盖
2继承性
	元素会自动拥有父元素或其祖先的部分样式
	按照近水楼台原则
	常见可继承属性：
		text-开头,font-开头,line-开头,color
3优先级

盒子模型(box model)

css中盒模型本质是一个盒子，封装周围html元素，包括：
外边距(margin),边框(border)，内边距(padding)，盒子内容(content)

弹性盒子模型(Flex Box) CSS3

适用不同屏幕大小和设备类型时确保元素拥有恰当的布局；以便更加有效对容器中的元素进行排列对齐分配空白空间等

弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item)组成
弹性容器通过设置display属性的值为flex 将其设置为弹性容器 {display:flex} - 默认横向排列
弹性容器内包含一个多个弹性子元素
display：
display:flex 开启弹性模型，并设置子元素默认横向排列
flex-direction: 设置弹性子元素在容器中的位置(取值 row;row-reverse;column;column-reverse)
row: 横向从左到右排列-左对齐(默认)
row-reverse: 反转横向排列，从右到左-右对齐
column: 纵向排列
column-reverse: 反转纵向排列，从下往上排列
justify-content: 内容对齐，弹性项沿着弹性容器的主轴线(main axis)对齐
子元素属性：
flex: 表示子元素占据容器空间大小的比重，
设置该属性，宽度width不在生效
flex-grow: 表示子元素占据容器空间大小的比重，
设置该属性，宽度width不在生效