css选择器(2)——属性选择器和基于元素结构关系的选择器
在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。
3.属性选择器
a)根据是否存在该属性来选择
如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：
/*根据单个属性来选择*/
h1[class]{
color:sliver;
}
/*还可以根据多个属性来选择*/
h1[class][id]{
color:yellow;
}
b)根据具体属性值来选择
<style>
/*也可以利用多个属性值来选择,第二段变成了红色*/
p[class='one'][alt='two']{
color:red;
}
</style>
<body>
<p class='one'>一个class属性</p>
<p class='one' alt='two'>一个class属性加上一个alt属性</p>
</body>
c)根据部分属性值来选择
~=：如果属性能够接受词列表，可以根据其中的任意一个词进行选择。
*=word1：选择属性值中包含word1的所有元素
^=start：选择属性值中以start开头的所有元素
$=end：选择属性值中以end结尾的所有元素
<style>
p[class~='bar']{
color:red;
}
p[class*='wo']{
color:blue;
}
p[class^='th']{
color:yellow;
}
p[class$='ur']{
color:purple;
}
</style>
<body>
<p class='one bar'>one</p><!--红色-->
<p class='one bard'>与上一段作为对比</p><!--默认颜色-->
<p class='two ok'>two</p><!--蓝色-->
<p class='three'>three</p><!--黄色-->
<p class='four'>four</p><!--紫色-->
</body>
d)特定属性选择器
直接看例子：
/*选择src属性等于figure或者以figure-开头的元素*/
img[src|='figure']{
border:1px;
}
4.基于文档结构的选择器
a)后代选择器——使用空格分隔：
选择h1中的所有em元素：
h1 em{
color:gray;
}
/*当然并不限于两个选择器，例如：*/
/*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
p span em{
color:em
}
b)子元素选择器——使用>号分隔
选择h1的子元素而不是后代元素
<style>
h1 > em{
color:red;
}
</style>
<body>
<h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1>
</body>
c)相邻兄弟（不能是堂兄弟，即拥有相同的父元素）选择器——使用＋号分隔
<style>
p + h1{
color:red;
}
</style>
<body>
<p>第一段</p>
<h1>第二段</h1><!--颜色变红-->
<h1>第三段</h1><!--颜色不变--> </body>
css选择器(2)——属性选择器和基于元素结构关系的选择器的更多相关文章
- jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）
一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaSc ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 【CSS】float属性
float浮动属性1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版 实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认文 ...
- CSS伪元素选择器和属性选择器
伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter 首字母(只能用于块元素) :first-line 第一行 1.为p元素中的第一个字符设置颜色为黄色, ...
- 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
- 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
随机推荐
- iOS UITextView自适应高度UITextContainerView抖动问题
在打造一个类似于微信朋友圈评论输入框的时候,需要动态调整输入框的高度, 但是,在调整了UITextView的高度之后,继续输入会导致内容(UITextContainerView里的文字)抖动. scr ...
- Spring + MyBaits java.lang.reflect.InvocationTargetException 启动日志报错
调试发现 实例化 class org.apache.ibatis.logging.slf4j.Slf4jImpl时发生异常,所以 slf4j jar 问题解决: http://www.cnblogs. ...
- 数论/暴力 Codeforces Round #305 (Div. 2) C. Mike and Frog
题目传送门 /* 数论/暴力:找出第一次到a1,a2的次数,再找到完整周期p1,p2,然后以2*m为范围 t1,t2为各自起点开始“赛跑”,谁落后谁加一个周期,等到t1 == t2结束 详细解释:ht ...
- dos 下 批量替换 只支持txt
首先必须存成 bat 格式,其次识别不了word 1.bat ##替换12 成12*3 @echo offsetlocal enabledelayedexpansionfor /F "tok ...
- (021)VMWare副虚拟磁盘和子虚拟磁盘id不匹配
问题:因为某种原因,修改了VM虚拟机的父磁盘内容,导致开机时出现如下错误: 父虚拟磁盘在子虚拟磁盘创建之后被修改过.父虚拟磁盘的内容 ID 与子虚拟磁盘中对应的父内容 ID 不匹配打不开磁盘“***. ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第六天(非原创）
文章大纲 一.课程介绍二.今日内容简单介绍三.Httpclient介绍与实战四.项目源码与资料下载五.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工 ...
- 【转】一个Java对象到底占多大内存？
最近在读<深入理解Java虚拟机>,对Java对象的内存布局有了进一步的认识,于是脑子里自然而然就有一个很普通的问题,就是一个Java对象到底占用多大内存? 在网上搜到了一篇博客讲的非常好 ...
- 利用贝塞尔曲线绘制（UIBezierPath）自定义iOS动态速度表，可以自定义刻度，刻度值，进度条样式
GitHub的Demo下载地址 使用UIBezierPath画图步骤: 创建一个UIBezierPath对象 调用-moveToPoint:设置初始线段的起点 添加线或者曲线去定义一个或者多个子路径 ...
- re正则表达式公式讲解5
1.refullmatch() 完全匹配字符串则返回object,否则返回None import re s = "max@123uyt146" print(re.fullmatch ...
- 获取登陆信息 在created()方法中
// 获取登录信息 public async InitUser() { await sj.globalVar.Init(true); this.params.unitId = sj.globalVar ...