浙江龙网

  1. 首页 > 生活百科 > >

CSS选择器大全48式( 三 )

生活百科

id值的元素：url#id:rootIE9html根元素：匹配文档的根元素，就是html元素，常用于全局css变量申明 。逻辑条件伪类描述（2）:not (参数选择器) IE9匹配不符合参数选择器的所有元素，多个逗号隔开，不支持复杂的选择器:is (参数选择器) IE匹配指定选择器列表里的元素，多个逗号隔开 ， 不支持复杂的选择器其他伪类（4）@page :first打印文档的时候，第一页的样式@page :left打印文档的左侧页设置 CSS 样式，和@page 配套使用@page :right打印文档的所有右页，和@page 配套使用:lang基于语言（HTMLlang属性的值）匹配元素 。语言是通过lang 属性，和 <meta> 元素的组合来决定的表单文本框的校验状态样式示例：
<style>:root {/*申明css全局变量*/--error-color: red;}#vtag input:required+label::before{content: "*";color:var(--error-color);}#vtag input:in-range{border:green 1px solid;color: green;margin: 20px 0;}#vtag input:out-of-range{border:red 1px solid;color:var(--error-color);margin: 20px 0;}#vtag input:out-of-range+label::after{content: "，值必须在1到10之间";color:var(--error-color);}</style><div id="vtag">年龄：<input type="number" value="https://www.huyubaike.com/biancheng/13" id="t3" name="t3" min="1" max="10" required><label for="t3"></label></div>

CSS选择器大全48式

文章插图
表格结构选择类样式：表头高亮样式；隔行换色 ， 第一列高亮+排名次
<style>#vtb{border-collapse: collapse;width: 300px;text-align: center;border: 2px black solid;}#vtb tr:first-child th{ /*标题行样式*/background-color:blueviolet;font-weight: bold;color: white;}#vtb tr:nth-of-type(2n+2){ /*隔行换色*/background-color: rgb(197, 239, 245);}#vtb tr:nth-of-type(2n+3){background-color: rgb(230, 245, 201);}#vtb tr td:first-child{ /*第一列的样式*/font-weight: bold;color: blue;background-color: lightpink;text-align: left;text-indent: 3px;}#vtb tr:nth-of-type(2) td:first-child::before{ /*添加排名序号*/content: "";}#vtb tr:nth-of-type(3) td:first-child::before{content: "";}#vtb tr:nth-of-type(4) td:first-child::before{content: "";}</style><!-- 表格效果：表头高亮样式；隔行换色，第一列高亮+排名次 --><table id="vtb" border="1"><tr><th>姓名</th><th>分数</th><th>学号</th></tr><tr><td>张三</td><td>r1-2</td><td>r1-3</td></tr><tr><td>周伦</td><td>r2-2</td><td>r2-3</td></tr><tr><td>李子柒</td><td>r3-2</td><td>r3-3</td></tr><tr><td>王小二</td><td>r4-2</td><td>r4-3</td></tr></table>
CSS选择器大全48式

文章插图
2.2、伪元素选择器::伪元素，顾名思义，像元素但不是真正的元素 。基于一些预定的规则，像一个新的元素一样的虚拟元素 ， 如段落中的第一行 。
伪元素用双冒号开头 ::，如p::first-line{}，不过有早期版本的伪元素是单冒号开头的 。
伪元素选择器描述（8）::afterIE9匹配出现在原有元素的实际内容之后的一个可样式化元素 。::beforeIE9匹配出现在原有元素的实际内容之前的一个可样式化元素 。::first-letterIE9匹配元素的第一个字符 。::first-lineIE9匹配元素的第一行 。::selection被选中：匹配文档中被选择的那部分，可用来自定义文本选中样式::grammar-error匹配文档中包含了浏览器标记的语法错误的那部分 。::spelling-error匹配文档中包含了浏览器标记的拼写错误的那部分 。::placeholderIE表单元素的占位文本placeholder
?可插入内容的::before 、::after 伪元素，是一组特别的伪元素 ， 配合content属性，可用css插入（文本）内容（插入的内容不可选中） 。
<style>#vtag p:first-child::first-letter {font-size: 200%;}#vtag p:first-child::first-line {color: red;}/* 插入内容并设置其样式（无法选中） */#vtag p:first-child::after {content: "——《四书五经》";color: cornflowerblue;font-size: 80%;}/* 设置文字选择状态样式 */#vtag p::selection{color:white;background-color: #ff0000;}</style><div id="vtag"><p>出必告，反必面，居有常，业无变 。</p><p>湖畔大学的梁宁曾说过：「要找到那件能让你一直不厌其烦做下去的事 ， 你不厌其烦的地方 ， 就是你的天分所在 。追随内心 ， 做自己喜欢的事，时间久了，你就会成功 。」</p></div>

推荐阅读


上一篇：【JVM】关于JVM，你需要掌握这些 | 一文彻底吃透JVM系列

下一篇：微信截图大小怎么设置（微信截图怎么固定大小)