css3属性选择器,兄弟选择器,伪类选择器

属性选择器

css3语法(类似于正则)

属性选择器:属性是相对于标签而言。

所谓属性选择器就是根据指定名称的属性的值来查找元素

  /*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/

li[style]{

text-decoration: underline;

}

/*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签   =是严格匹配*/

li[class=red]{

/*font-size: 30px;*/

}

/*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/

li[class*=red]{

/*font-size: 30px;*/

}

/*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/

li[class^=blue]{

font-size: 30px;

}

/*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/

li[class$=blue]{

/*font-size: 30px;*/

}

兄弟选择器

  +:获取当前元素的相邻的满足条件的元素

~:获取当前元素的满足条件的兄弟元素

伪类选择器(根据父元素)

这种用法不是很友善,一般数据项是从后台获取的,有很多未知列

可以使用first-of-type限制类型

指定位置的项

空值的项

原文地址:https://www.cnblogs.com/ll15888/p/12303386.html

时间: 2025-01-09 06:43:51

css3属性选择器,兄弟选择器,伪类选择器的相关文章

CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ] E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att ^= 'val' ]   选择具有 att 属性且属性值以 val 开头的 E元素 E

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

HTML5简介 万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为:广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势: 新增语义化标签 <header></header> <!-- 头部标签 --> <nav></nav> <!-- 导航标签 --> <article>&l

用HTML写伪类选择器,结构伪类选择器,伪元素选择器样式

html,css lorem乱序铭文 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem

如何使用CSS3中的结构伪类选择器和伪元素选择器

原文:如何使用CSS3中的结构伪类选择器和伪元素选择器 结构伪类选择器介绍# 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一个子元素. E:nth-child(n) 匹配E元素的第n个子元素. E:nth-child(2n)或者E:nth-child(even) 匹配E元素的偶数子元素. E:nth-child(2n+1)或者E:nth-child(odd) 匹配

让 IE 8 及以下浏览器支持 CSS3伪类选择器

首先说明一下: 用IE9以下的用户,你们都是爸爸. 前言:当css3.0出现以后,出现了很多选择器,其中伪类选择器很好用,比如:nth-child,很容易判断并选择对象.让我们的工作变的更方便. 但有个麻烦,IE8及IE8以下对很多伪类选择器并不兼容. 这13个伪类选择器是比较长用到的: 会发现,IE9对这些伪类选择器都能兼容.IE8.IE7对 :first-child,:hover是兼容的,IE8对:focus是兼容的,而其他IE7,IE8并不兼容. IE 对css3的严重不支持, 这是让人无

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚

H5与CS3权威下.19 选择器(2)结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: 1 <p>伪元素选择器 <br>类选择器</p> 1 p:first-line{background: pink;}

粗谈伪类选择器

伪类选择器是添加到选择器的关键字,用于指定要选择的元素的特殊状态.以:单冒号开始.分为动态伪类选择器.结构伪类选择器.否定伪类选择器. 动态伪类选择器: :link{ }[元素未访问时的状态] :visited{ }[元素已访问后的装态] :focus{ }[被选中时会发生的装态] :hover{ }[鼠标悬停在元素时的会发生的状态] :active{ }[鼠标点击时元素发生的状态] 注:该顺序不能改变,link和visited为静态伪类选择器,可不分先后顺序 结构伪类选择器:用于选中某个元素