链接伪类选择器
选择器:link
- 超链接未被访问时的样式
选择器:visited
- 超链接已被访问时的样式
选择器:target
- 当被超链接点击时
- 子元素设置id,超链接设置href=‘#id’,当点击超链接时该元素触发样式
触发类型选择器
选择器:hover
- 鼠标悬停样式
- 选中上级元素下级元素产生动画
- 上级元素:hover 下级元素选择器(以上级元素为起始点开始选择,不包括上级,非从头)
对伪类产生样式
xx:hover::after{...}
选择器:active
- 鼠标按下时的样式
选择器:focus
- 鼠标聚焦时的样式
元素相关类型选择器
:root根选择器
:root{
匹配根元素,在HTML中,根元素始终是html元素。
}
:empty空选择器
- 选择子元素为空的元素
选择器:lang(xx)
- 选择每个lang属性值以"xx"开头的元素。
结构性伪类选择器
选择器:not(选择器)
- 匹配不含有括号内选择器的元素样式
- :not(:last-child) 当:not前面没有选择器时,会匹配所有非not内选择的元素
:not(#id)
- :not(:last-child) 当:not前面没有选择器时,会匹配所有非not内选择的元素
<ul>
<li>右边框</li>
<li>右边框</li>
</ul>
ul li:not(:last-child) {
border-right: 1px solid #666;
}
选择器:first-child
- 选择器必须是子元素,匹配父元素的第一个子元素的样式
选择器:first-of-type
- 选择器必须是子元素,匹配父元素的第一个选择器元素的样式
选择器:last-child
- 选择器必须是子元素，匹配父元素的最后一个子元素的样式
选择器:last-of-child
- 选择器必须是子元素，匹配父元素的最后一个选择器元素的样式
选择器:only-child
- 选择器必须是子元素，匹配在父元素的子元素中唯一的一个标签
选择器:ntn-child(第几个子元素)
- 选择器必须是子元素，匹配父元素中的第几个子元素
- 可以放表达式
li:nth-child(odd){}
li:nth-child(even){}
li:nth-child(2n+1){ an+b格式的表达式,a可以是负数
color:coral;
} 匹配奇数个子元素
选择器:nth-of-type(第几个子元素)
- 选择器必须是子元素,根据子元素类型匹配其中的序列
选择器:nth-last-child(n)
- 选择器必须是子元素，从最后开始匹配父元素中的第几个子元素
选择器:nth-last-of-type(n)
- 选择器必须是子元素,根据子元素类型从最后匹配其中的序列
选择器:only-of-type
- 选择器必须是子元素,匹配父元素中只有一个该子元素的元素
选择器:only-child
- 选择器必须是子元素,匹配父元素只有一个子元素,且子元素为该选择器选择的元素
选择器:empty
- 匹配不包含任何子元素的元素的样式
选择器:has(选择器)，可用于向前选择！！！
- 选择包含选定元素的元素，可用于向前选择
- 可以实现类似“父选择器”和“前面兄弟选择器”的功能
/* 子元素是图片的a标签 */
a:has(> img) {
display: block;
}
/* 后面是p标签的h5 */，相当于“前面兄弟选择器”
h5:has(+ p) {
font-size: 1rem;
}
/* 提交按钮未被禁用的表单 */
form:has(.submit:not(:disabled)) {
border-color: green;
}
表单相关选择器
:focus-within 焦点即后代焦点选择器
:focus-within{
表示一个元素获得焦点或该元素的后代元素获得焦点时匹配,焦点情况包括按钮被点击
}
:placeholder-shown 展示placeholder选择器
:placeholder-shown{
在 <input /> 或 <textarea> 元素显示placeholder text时匹配,即点击或输入placeholder消失时不匹配
}
input:checked
- 选择器匹配每个已被选中的input 元素(只用于单选按钮和复选框)
input:checked+span{
color: red;
} 选择后的第一个span标签内容变红色，实现动态效果
:disabled
- 匹配被禁用的元素,大多在表单元素上
input:enabled
- 匹配已启用的元素(未禁用)
input:in-range
- 选择值在指定范围内的所有input元素
<input type="number" min="5" max="10" value="7">
input:out-of-range
- 选择值在指定范围外的所有input元素
input:invalid
- 选择无效的表单元素
- 适用于有限制的表单元素,例如带有min和max属性的输入元素,没有合法电子邮件的email字段或没有数值的number字段等
:valid
- 同上,有效的表单元素
:optional
- 选择器仅适用于这几个表单元素:input、select和textarea,不带required属性的表单元素
:required
- 带有 required 属性的表单元素被定义为必填。
- 适用于这几个表单元素：inpu、select 以及 textarea。
:read-only
- 带"readonly"属性的表单元素被定义为“只读”
:read-write
- 未设置"readonly"和"disabled"属性的表单元素被定义为可读和可写。
其它magic选择器
:is(选择器1,选择器2) 最大能力选择器
- :is(选择器1,选择器2) 留下其中可以作为选择的选择器
ul li,ol li {} 可化简为 :is(ul, ol) li {}
ul .title, ul .content{} 可化简为.container-1 :is(.title, .content){}
代码示例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
color:yellow;
text-decoration: none;
}
a:visited{
color:red;
}
a:active{
color:blue;
}
.common{
color:aqua;
}
p:not(.common){
color:cadetblue;
}
li:first-child{
color:chartreuse;
}
li:last-child{
color:saddlebrown;
}
p:only-child{
color:olivedrab;
}
p:empty{
font-weight: bold;
}
input:checked+span{
color: red;
}
li:nth-child(2n+1){
color:coral;
}
</style>
</head>
<body>
<a href="">超链接</a>
<p>aaaawww</p>
<p class="common">啊啊啊啊啊啊啊啊</p>
<p>哇啊啊啊啊啊啊啊啊啊啊</p>
<p>哈哈哈哈哈哈哈哈哈</p>
<input type="button" value="d"/>
<p> <a href="">绘画</a></p>
<b >aaaaaann</b>
<hr />
<ul>
<li>哇</li>
<li>哈</li>
<li>呵</li>
<p>唯一</p>
<li>哒</li>
<li>嘻</li>
<li>嘤</li>
</ul>
<hr />
<ul>
<li>哇1</li>
<li>哈2</li>
<li>呵3</li>
<li>哒4</li>
<li>嘻5</li>
<li>嘤6</li>
</ul>
<hr />
男:<input type="radio" checked="checked" />
爱好: <input type="checkbox" /><span>篮球</span>
<input type="checkbox"/ checked=:"checked"><span>唱跳</span>
<input type="checkbox"/><span>rap</span>
</body>
</html>
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
