css3新增了哪三种属性选择器,下面哪个选择器是css3新增的选择器?
目录
基本选择器扩展属性选择器伪类和伪元素选择器
:
基本选择器扩展
1.子元素选择器
:番茄：#wrap。内{颜色：粉色；}也可以叫直系后代选择器。这种选择器只能匹配直系后代，不能匹配深层后代。元素概要：作用于一个元素的第一代后代，空格作用于一个元素的所有后代。
2.相邻兄弟选择器
:番茄：#先包#吧。内部{ color:# f00；}它将只匹配紧随其后的兄弟元素
3.通用兄弟选择器
:番茄：# wrap # first ~ div { border:1px solid；}它将匹配第二个元素，前提是它跟在(不一定跟在)第一个元素后面，并且它们都有一个共同的父元素，所有的兄弟元素。
4.选择器分组
:番茄：h1、h2、h3 {颜色：粉色；}这里的逗号叫做接合符。
:
属性选择器
1.子串值属性选择器
:tomato: [attr=val]:选择attr属性值为val(包括val)或以val-开头的元素。
:tomato: [attr=val]:选择attr属性值以val开头的元素(包括val)。
:tomato: [attr$=val]:选择attr属性值以val结尾的元素(包括val)。
:tomato: [attr*=val]:选择attr属性值包含字符串val的元素。一些浏览器支持元素的子串选择。
2.存在和值属性选择器
:tomato: [attr]:该选择器选择包含attr属性的所有元素，而不考虑attr的值。[attr=val]:此选择器仅选择其attr属性被分配给val的所有元素。
:tomato: [attr~=val]:表示具有以attr命名的属性的元素，该属性是由空格分隔的值的列表，其中至少有一个值是val。例如，由空格分隔的多个类别中的一个类别。例如name=atguigu_llc atguigu
:tomato: [name=val]:该选择器仅选择其name属性被分配给val的所有元素。
:
伪类与伪元素选择器
1.链接伪类
:tomato:link是指所有的锚都是超链接，指向一个未访问的地址。
:tomato:visited表示超链接并指向已访问地址的所有锚点。
:tomato:target表示一个特殊的元素，它的id是URI的片段标识符
:感叹号：注意：link，visited，target作用于链接元素！前两个只能作用于A标签。
*{边距：0；填充：0；} div { width:300 px；高度：200px行高：200像素；背景：浅绿色；颜色：热粉色；文本对齐：居中；显示：无；} a:参观过{颜色：橙色；}:目标{ display:block；}2.动态伪类
:tomato:hover表示在元素上浮动。
:tomato:active表示匹配用户激活的元素(点击并按住时)
:番茄：既然：一个标签的link和：visited可以覆盖所有A标签的状态，当：link，visited，hover，active同时出现在一个标签上：link和：visited不能放在最后！
:tomato:privacy and:visited selector只有以下属性可以应用于已访问的链接：颜色、背景色、边框色。
:感叹：注意：hover，active基本可以作用于所有元素！
style type= text/CSS * { margin:0；填充：0；} a{ text-decoration:无；颜色：黑色；显示：块；} a:hover { font-size:24px；/*颜色：红色；*/} a:link { font-size:48px；/*颜色：粉色；*/} a:已访问{/* font-size:96px；*//*颜色：深粉色；*/} /style3形式相关伪类
:disable匹配被禁用的表单。
:选中匹配所选表单。
:焦点匹配焦点形式。
:启用匹配可编辑表单。
实践练习1
head meta charset= UTF-8 title/title style type= text/CSS input:enabled { background:天蓝色；}输入：禁用{背景：deeppink}输入：选中{宽度：200 px高度：200像素}输入：焦点{背景：粉色；}/样式/床头箱输入类型=text /输入类型=text disabled=disabled /输入类型=复选框/输入类型=text //body实操练习2自定义单选按钮
head meta charset= UTF-8 title/title style type= text/CSS * { margin:0；填充：0;}标签{位置：相对；浮动：左；/*转换为块级元素撑开大小*/宽度：100像素高度：100像素边框：2px纯色；边界半径：50%;溢出：隐藏；}标签span { position:绝对；左：0;top:0；底部：0;右：0;}输入{位置：绝对；左：-50px；top:-50px；}输入：勾选span {背景：粉色；}/style/head body label input type= radio name= Rong to wulian /span/span/label label input type= radio name= Rong to wulian /span/span/label/body
4.伪元素
：番茄：概念：伪元素表示页面中一些特殊的并不真实存在的元素（特殊的位置)
：番茄：语法使用：开头
：番茄：类别：:首字母:第一行:选择:之前:之后注意：和必须结合内容属性来使用
：番茄：代码示例：
head meta charset= utf-8 meta name= viewport content= width=device-width，initial-scale=1.0 /meta http-equiv= X-UA-Compatible content= ie=edge /title/title style type= text/CSS p:first-letter { color:# 008000；字体大小：2.5雷姆；} p:一线{颜色：aqua} p:选择{颜色：红色；} p:之前{内容： 我会永远爱你；颜色：蓝色；} p:后{内容：确定是你；颜色：绿色；}/style/床头divHello你还好吗/div p我还是一个段落我是一个很多很多解放碑还不错保持经济刺激哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈/p/body5 .结构性伪类（重点)
：番茄：指数的值从一开始计数！指数可以为变量名词（只能是索引可以为偶数奇数
：番茄：# wrap ele:n-child(索引)表示匹配#换行中第指数的子元素，这些伪类都是根据所有的子元素进行排序，这个子元素必须是电子式
：番茄：#包装元素：第n种类型（索引)表示匹配#换行中第指数的电子式子元素
除此之外：第n个孩子和：第n种类型有一个很重要的区别！第n种类型以元素为中心，在同一类型中排序，第n个孩子（相对于：第一个孩子：最后一个孩子或者：第n个子代(1):第n个最后一个子代(1))
/*偶数表示偶数
奇数的表示奇数
一流的：在p类型中排
第一个孩子：所有元素排
*/
:番茄：n-child(索引)系列
：第一个孩子
：最后一个孩子
：第n个最后一个孩子（索引)
：番茄：第n种类型（索引)系列
：第一类型：最后类型：第n最后类型（索引):唯一类型（相对于：第一种类型：最后一种类型或者：第n个类型(1):第n个最后一个类型(1)):不是：空(内容必须是空的，有空格都不行，有属性没关系)代码实例
*{边距：0;填充：0;} # wrap Li:n of-type(1){ color:粉色；} p:仅类型{ border: 1px固体；}6.伪元素选择器
*之后
*以前
*首字母
*一线
*选择
# wrap:before { content: ；显示：块；宽度：200px高度：200px背景：# 00FFFF} #wrap:在{ content:“”之后；显示：块；宽度：200px高度：200px背景：# 0000FF}就是这样。本文对CSS3选择器的实现中的新问题进行了介绍。更多相关CSS3选择器的新内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。