在css中伪元素选择器分哪两种：CSS伪类和伪元素选择器
在css中伪元素选择器分哪两种：CSS伪类和伪元素选择器<!DOCTYPE html> <style> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} /*选择获取焦点的input输入框*/ input:focus{ border:1px green bold; } /*选择元素p内的第一个字母*/ p:first-letter { text-transform: uppercase; color:red; } /*选择元素p内的第一行*/ p:first-line { text-decoration: underline; } /*选择属于其父元素的第一个子元素p*/ p:first-child{ color:firebric
Winter is coming
CSS伪类/伪元素包括:
Link相关的
- :link
- :visited
- :hover
- :active
Link和Input相关的
- :focus
- :target
- :enabled
- :disabled
- :checked
- :indeterminate //没有默认选中的一组单选按钮
- :required
- :optional
- :read-only
- :read-write
位置数目相关的
- :root 基本上就是选中html了 除非某些特殊情况比如xml文档中
- :first-child是父节点的第一个子元素
- :last-child是父节点的最后一个元素
- :nth-child() 括号类可以有多重写法比如2n 1 关键字odd even分别选中奇数和偶数 或填写具体数字 只选该数字的节点
- :nth-of-type() 类似nth-child 但是能应用到不同类型
- :first-of-type 选中父节点中的第一个该类型的子元素
- :last-of-type 选择父节点中的最有一个该类型的子元素
- :nth-last-of-type() 同nth-of-type 但是顺序反过来 从最后往选
- :only-of-type 是父节点的唯一子节点时选中
关系伪类选择器
- :not() 排除法选择器
- :empty选择既没有文本也没有子元素的元素
文本相关的
- ::first-letter 选择第一个字母
- ::first-line 选择第一行
- :lang 语言选择器
部分示例
<!DOCTYPE html> <style> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} /*选择获取焦点的input输入框*/ input:focus{ border:1px green bold; } /*选择元素p内的第一个字母*/ p:first-letter { text-transform: uppercase; color:red; } /*选择元素p内的第一行*/ p:first-line { text-decoration: underline; } /*选择属于其父元素的第一个子元素p*/ p:first-child{ color:firebrick; } /*在元素前面添加内容*/ span:before{ content: "<<"; } /*在元素后面添加内容*/ span:after{ content: ">>"; } /*选择前面有section元素的所有div元素 不管中间是否有别的元素*/ section~div{ background-color: red; } /*使用户选择的元素背景变为深橙色*/ ::selection{ background-color: darkorange; } </style> <a href="#">A Link</a><br> <input type="text" name="name" id="name"> <p>this is a paragraph.</p> <p>this is a paragraph.<br>The second line.</p> <div><p>First child</p><p>Second child</p></div> <span>A Tale of Two Cities</span> <section></section><p></p> <div>Div after section 1</div> <div>Div after section 2</div>
Pseudo selector
nth-child示例
<!DOCTYPE html> <style> tr:nth-child(even){ background-color: beige; } </style> <table> <thead> <tr><th>Name</th><th>Quantity</th></tr> </thead> <tbody> <tr><td>BMW</td><td>1200</td></tr> <tr><td>Audi</td><td>1300</td></tr> <tr><td>Porsche </td><td>1000</td></tr> <tr><td>Benz </td><td>1100</td></tr> </tbody> </table>
应用偶数行样式
