css不常用的4个选择器-个人向
①：element1.element2（给同时满足有element1和element2 2个类名的元素添加样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.test1.test2 {
color: red;
}
</style>
</head>
<body>
<div class="test1">123</div>
<div class="test1 test2">
123
</div>
</body>
</html>
②：[attribute^=value] （匹配属性值以指定值开头的每个元素，如下面demo，给属性为href且值以http开头的所有a元素添加样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a {
display: block;
border-bottom: 1px solid #ccc;
}
[href^=http]::after {
content: 'after伪元素';
display: inline-block;
margin: 20px;
width: 50px;
height: 50px;
color: #fff;
text-align: center;
background-color: #000;
}
</style>
</head>
<body>
<a href="#">123</a>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://bilibili.com">B站</a><br>
</body>
</html>
③：element1 + element2（给紧接在element1元素后的第1个兄弟元素添加样式）
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.test1 + .test2 {
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1">666</div>
<div class="test2">888</div>
<div class="test2">999</div>
<div class="test3">000</div>
</body>
</html>
④：element1 ~ element2（给紧接在element1元素后的所有兄弟元素添加样式）
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.test1 ~ div {
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1">666</div>
<div class="test2">888</div>
<div class="test3">999</div>
<div class="test4">000</div>
</body>
</html>
css不常用的4个选择器-个人向的更多相关文章
- CSS最常用的三种选择器
标签选择器 样式的名称和标签的名称相同,如示例中的p标签,则对应名称为p的样式,若页面中有多个p标签,则这些p标签共同享用该样式 p{ color:blue; } <p>标签选择器< ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- 爬虫常用Xpath和CSS3选择器对比
爬虫常用Xpath和CSS3选择器对比 1. 简介 CSS是来配合HTML工作的,和Xpath对比起来,CSS选择器通常都比较短小,但是功能不够强大.CSS中的空白符' '和Xpath的'//'都表示 ...
- css的常用知识点
一.css的引入方式 1.行内引入 直接在标签中定义样式 <p style="background-color: red">test</p> 2.嵌入式引入 ...
- css知多少（5）——选择器（转）
css知多少(5)——选择器 1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得 ...
随机推荐
- ros相机标定
没有经过校准的camera拍摄的图片是有畸变的.如下图: 而我们希望得到的图片是这样的 ros中提供了一个程序camera_calibration帮助我们去做校准. 具体怎么校准参考 https:// ...
- django3-路由系统进阶
1.django的url到底是什么 就是路径 ,看成django的目录 ,每个目录对应个视图函数 ,当然一个url仅能对应一个函数 2.url的格式 url(正则表达式,views函数名,参数,别名) ...
- 如何给HTML页面设置行高
设置行高 由于简单还是老样子直接上代码了哦,注意:line-height属性值可以使用固定值如:20px..和百分比如:20%. 如果想让文字垂直居中如下:行高的主要作用是用来设置文本的垂直方向居中对 ...
- Swift相比OC语言有哪些优点
Swift相比OC语言有哪些优点 1.自动做类型推断 2.可以保证类型使用安全 Swif类型说明符 --Swift增加了Tuple表示元组类型 --Swift增加了Optional表示可选类型 常量一 ...
- BayaiM__MYSQL千万级数据量的优化方法积累__初级菜鸟
-----------------------------------------------------------------------------———————-------------- ...
- CGROUP九大子系统
blkio -- 这个子系统为块设备设定输入/输出限制,比如物理设备(磁盘,固态硬盘,USB 等等). cpu -- 这个子系统使用调度程序提供对 CPU 的 cgroup 任务访问. cpuacct ...
- eclipse的“sun.misc.BASE64Encoder”问题解决
新建一个AndroidHello工程,编译运行,出现问题如下: 编辑/Applications/Eclipse.app/Contents/Eclipse/eclipse.ini文件,加入 -vm /L ...
- 树型DP（2）
声明 https://blog.csdn.net/no1_terminator/article/details/77824790 参考课件和讲授来自Accelerator 找树的直径 树的直径定义为一 ...
- Pwn-level1
题目地址 https://dn.jarvisoj.com/challengefiles/level1.80eacdcd51aca92af7749d96efad7fb5 先看一下文件的类型和保护机制 ...
- aiomysql
aiomysql: import aiomysql import asyncio async def aiomysql_test(): loop = asyncio.get_event_loop() ...