CSS选择器 Selectors(伪对象选择符) 骑猪看日落 2021-06-26 16:06 466阅读 0赞 ## 伪对象选择符 ## <table> <thead> <tr> <th align="left">选择符</th> <th align="left">版本</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">E:first-letter/E::first-letter</td> <td align="left">CSS1/3</td> <td align="left">设置对象内的第一个字符的样式。</td> </tr> <tr> <td align="left">E:first-line/E::first-line</td> <td align="left">CSS1/3</td> <td align="left">设置对象内的第一行的样式。</td> </tr> <tr> <td align="left">E:before/E::before</td> <td align="left">CSS2/3</td> <td align="left">设置在对象前(依据对象树的逻辑结构)发生的内容。用来和<code>content</code>属性一起使用</td> </tr> <tr> <td align="left">E:after/E::after</td> <td align="left">CSS2/3</td> <td align="left">设置在对象后(依据对象树的逻辑结构)发生的内容。用来和<code>content</code>属性一起使用</td> </tr> <tr> <td align="left">E::placeholder</td> <td align="left">CSS3</td> <td align="left">设置对象文字占位符的样式。</td> </tr> <tr> <td align="left">E::selection</td> <td align="left">CSS3</td> <td align="left">设置对象被选择时的颜色。</td> </tr> </tbody> </table> -------------------- ## `:first-letter` 选择器 ## 定义和用法 :first-letter选择器用来指定元素第一个字母的样式。 提示: `:first-letter`选择器可以使用以下属性: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if float is 'none') text-transform line-height float clear 注意: “`first-letter`” 选择器仅适用于在块级元素中. 选择每个 `<p>`元素的第一个字母来设置样式: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:first-letter{ font-size:200%; color:#8A2BE2; } </style> </head> <body> <div> <h1>Hello World!</h1> <p>PHP</p> <p>HTML</p> <p>CSS</p> </div> </body> </html> 效果图: ![2.jpg][] -------------------- ## `:first-line` 选择器 ## ### 定义和用法 ### `:first-line`选择器用来指定选择器第一行的样式。 注意: `:first-line`选择器可以使用以下属性: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 注意: “`first-line`” 选择器适用于块级元素中。 每个`<p>`元素的第一行选择的样式: 效果图: ![2.jpg][2.jpg 1] -------------------- ## `:before` 选择器 ## ### 定义和用法 ### `:before` 选择器向选定的元素前插入内容。 使用`content` 属性来指定要插入的内容。 注意: :`before`在`IE8`中运行,必须声明`<!DOCTYPE>` 每个 `<p>`元素之前插入内容、并设置所插入内容的样式: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:before{ content:"标题"; background-color:yellow; color:red; font-weight:bold; } </style> </head> <body> <div> <p>1、测试文本!</p> <p>2、测试文本!</p> </div> </body> </html> 效果图: ![2.jpg][2.jpg 2] -------------------- ## `:after` 选择器 ## ### 定义和用法 ### `:after` 选择器向选定的元素之后插入内容。 使用`content` 属性来指定要插入的内容。 > 注意: `:after` 在`IE8`中运行,必须声明`<!DOCTYPE>` 在每个 `<p>` 元素后面插入内容,并设置所插入内容的样式: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:after{ content:"- 台词"; background-color:yellow; color:red; font-weight:bold; } </style> </head> <body> <div> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> </body> </html> 效果图: ![2.jpg][2.jpg 3] -------------------- ## `::placeholder`选择器 ## 语法: E::placeholder { sRules } 说明: **设置对象文字占位符的样式。** * `::placeholder` 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。 * 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。 * 需要注意的是,除了Firefox是 `::[prefix]placeholder`,其他浏览器都是使用 `::[prefix]input-placeholder` * `Firefox`支持该伪元素使用`text-overflow`属性来处理溢出问题。 **`::placeholder`的使用示例:** <input type="text" placeholder="占位符"/>input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { // IE10+ color: #999; } input:-moz-placeholder { // Firefox4-18 color: #999; } input::-moz-placeholder { // Firefox19+ color: #999; } <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <style> input::-webkit-input-placeholder { color: green; } input:-ms-input-placeholder { // IE10+ color: green; } input:-moz-placeholder { // Firefox4-18 color: green; } input::-moz-placeholder { // Firefox19+ color: green; } </style> </head> <body> <input id="test" placeholder="Placeholder text!"> </body> </html> -------------------- ## `::selection` 选择器 ## ### 定义和用法: ### `::selection`选择器匹配元素中被用户选中或处于高亮状态的部分。 `::selection`只可以`::selection` 选择器应用于少数的`CSS`属性:`color, background, cursor`,和`outline` > 注意:`E9+, Opera, Google Chrome`和`Safari`支持`::selection`选择器 > Firefox 通过其私有属性 `::-moz-selection` 支持 ### `CSS`语法: ### ::selection { CSS声明; } 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ::selection { color:pink; } ::-moz-selection { color:pink; } </style> </head> <body> <p>将选定的文本变为粉色</p> </body> </html> 效果图: ![在这里插入图片描述][20190616224415463.png] [2.jpg]: /images/20210626/95169c968c2249d3a83ab9558abb2af4.png [2.jpg 1]: /images/20210626/9512254a748b4da5a940f744a50490d9.png [2.jpg 2]: /images/20210626/af82c3ad28d946e48b8a518dbb3e844b.png [2.jpg 3]: /images/20210626/f6b7effbc9184e54bfd26c610e5883d4.png [20190616224415463.png]: /images/20210626/83d65821c3e441ab9fd59ca936c2b28c.png
还没有评论,来说两句吧...