学生网页设计代码大全,宁波seo网络推广产品服务,怎么制作网站vi页面,网站联盟如何实现CSS日常总结–CSS伪类 文章目录 CSS日常总结--CSS伪类前言1.结构性伪类:1. :first-child#xff1a;选择父元素下的第一个子元素2. :last-child#xff1a;选择父元素下的最后一个子元素3. :nth-child(n)#xff1a;选择父元素下的第n个子元素4. :nth-last-child(n)#xf…CSS日常总结–CSS伪类 文章目录 CSS日常总结--CSS伪类前言1.结构性伪类:1. :first-child选择父元素下的第一个子元素2. :last-child选择父元素下的最后一个子元素3. :nth-child(n)选择父元素下的第n个子元素4. :nth-last-child(n)从最后一个子元素开始计数选择第n个子元素5. :nth-of-type(n)选择与同类型的兄弟元素中的第n个元素6. :nth-last-of-type(n)从同类型的兄弟元素的最后一个开始计数选择第n个元素7. :first-of-type选择同类型的兄弟元素中的第一个元素8. :last-of-type选择同类型的兄弟元素中的最后一个元素9. :only-child选择是其父元素中唯一的子元素的元素10. :only-of-type选择是其父元素中唯一的特定类型的子元素的元素 2.功能性伪类:1.:not(selector)选择不匹配给定选择器的元素 3.界面状态伪类:1. :hover鼠标悬停时应用的样式2. :active元素被激活时应用的样式3. :focus元素获得焦点时应用的样式 4.界面结构伪类:1. :target选择当前活动的目标元素 5.链接伪类:1. :link选择未被访问的链接2. :visited选择已被访问的链接 6.动态变化伪类:1. :focus-within选择包含有焦点元素的元素 7.表单伪类:1. :checked选择被选中的表单元素2. :disabled选择被禁用的表单元素3. :enabled选择处于启用状态的表单元素 8.其他伪类1. :empty 选择没有子元素的元素2. :is()选择器匹配元素类比组合选择器3. :where()选择器匹配元素优先级低4. :has()选择器匹配元素5. :matches():多条件支持 前言
CSS伪类是一种允许选择文档中特定状态或位置的CSS选择器。它们用于选择不同状态下的元素而无需改变HTML标记的内容。伪类以冒号:开头紧随其后的是伪类的名称。它们与选择器结合使用以定义在特定条件下应用的样式。伪类的主要作用是允许开发者根据用户的交互、文档结构或其他条件来选择元素从而实现更加动态和交互性的样式。
1.结构性伪类:
1. :first-child选择父元素下的第一个子元素
选择父元素下的第一个子元素。
li:first-child {color: red;
}2. :last-child选择父元素下的最后一个子元素
选择父元素下的最后一个子元素。
li:last-child {color: blue;
}3. :nth-child(n)选择父元素下的第n个子元素
选择父元素下的第n个子元素。
li:nth-child(odd) {background-color: #f2f2f2;
}4. :nth-last-child(n)从最后一个子元素开始计数选择第n个子元素
从最后一个子元素开始计数选择第n个子元素。
li:nth-last-child(2) {font-weight: bold;
}5. :nth-of-type(n)选择与同类型的兄弟元素中的第n个元素
选择与同类型的兄弟元素中的第n个元素。
p:nth-of-type(2n) {color: green;
}6. :nth-last-of-type(n)从同类型的兄弟元素的最后一个开始计数选择第n个元素
从同类型的兄弟元素的最后一个开始计数选择第n个元素。
p:nth-last-of-type(odd) {text-decoration: underline;
}7. :first-of-type选择同类型的兄弟元素中的第一个元素
选择同类型的兄弟元素中的第一个元素。
h2:first-of-type {font-size: 24px;
}8. :last-of-type选择同类型的兄弟元素中的最后一个元素
选择同类型的兄弟元素中的最后一个元素。
span:last-of-type {border: 1px solid #ccc;
}9. :only-child选择是其父元素中唯一的子元素的元素
选择是其父元素中唯一的子元素的元素。
div:only-child {background-color: yellow;
}10. :only-of-type选择是其父元素中唯一的特定类型的子元素的元素
选择是其父元素中唯一的特定类型的子元素的元素。
p:only-of-type {color: purple;
}2.功能性伪类:
1.:not(selector)选择不匹配给定选择器的元素
选择不匹配给定选择器的元素。
input:not([typesubmit]) {border: 1px solid #999;
}3.界面状态伪类:
1. :hover鼠标悬停时应用的样式
鼠标悬停时应用的样式。
a:hover {color: orange;
}2. :active元素被激活时应用的样式
元素被激活时例如按钮被按下应用的样式。
button:active {background-color: #ccc;
}3. :focus元素获得焦点时应用的样式
元素获得焦点时应用的样式通常与表单元素一起使用。
input:focus {border: 2px solid blue;
}4.界面结构伪类:
1. :target选择当前活动的目标元素
选择当前活动的目标元素通常与页面内链接锚点一起使用。
#section1:target {background-color: lightyellow;
}5.链接伪类:
1. :link选择未被访问的链接
选择未被访问的链接。
a:link {color: blue;
}2. :visited选择已被访问的链接
选择已被访问的链接。
a:visited {color: purple;
}6.动态变化伪类:
1. :focus-within选择包含有焦点元素的元素
选择包含有焦点元素的元素。
form:focus-within {border: 2px solid #555;
}7.表单伪类:
1. :checked选择被选中的表单元素
选择被选中的表单元素例如复选框或单选按钮。
input[typecheckbox]:checked {border-color: green;
}2. :disabled选择被禁用的表单元素
选择被禁用的表单元素。
input:disabled {background-color: #eee;
}3. :enabled选择处于启用状态的表单元素
选择处于启用状态的表单元素。
input:enabled {background-color: #fff;
}8.其他伪类
1. :empty 选择没有子元素的元素
选择没有子元素的元素。
p:empty {display: none;
}2. :is()选择器匹配元素类比组合选择器 用法:is(selector) 或 :matches(selector) 示例选择所有段落和标题元素其中至少一个具有类名为 “important” 的元素。 :is() 伪类允许您组合多个选择器只要其中至少一个选择器匹配元素整个选择器就匹配。这有助于简化复杂的选择器提高代码的可读性。 :is(p, h1, h2, h3):is(.important)3. :where()选择器匹配元素优先级低 用法:where(selector) 或 :matches(selector) 示例选择所有段落和标题元素其中至少一个具有类名为 “important” 的元素。 :where() 与 :is() 类似允许组合多个选择器。与 :is() 不同的是:where() 不会影响特异性因此它更适合用于提高代码的可读性而不引入额外的特异性。 :where(p, h1, h2, h3):where(.important)4. :has()选择器匹配元素 用法:has(selector) 示例选择所有包含至少一个带有类名为 “highlight” 的子元素的 div 元素。 :has() 伪类用于选择包含特定后代的元素。如果指定的选择器匹配元素的后代那么包含这些后代的元素就会被选择。这在需要选择包含特定内容的父元素时非常有用。 div:has(.highlight)5. :matches():多条件支持
:matches()多条件支持允许在一个选择器中同时匹配多个条件类似于逗号分隔的选择器列表但更灵活。
p:matches(:hover, :active) {}
