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节点上?就不得 ...
随机推荐
- 利用Python进行数据分析-Pandas(第一部分)
利用Python进行数据分析-Pandas: 在Pandas库中最重要的两个数据类型,分别是Series和DataFrame.如下的内容主要围绕这两个方面展开叙述! 在进行数据分析时,我们知道有两个基 ...
- json递归查询
主体: class json_search(): '''递归查询依赖key''' def search_key(self,data,key): self.data = data self.key_va ...
- pandas 学习 第2篇：Series -（创建，属性，转换和索引）
序列(Series)是由一组数据(各种NumPy数据类型),以及一组与之相关的数据标签(索引)组成,序列不要求数据类型是相同的. 序列是一个一维数组,只有一个维度(或称作轴)是行(row),在访问序列 ...
- java基础(23):字节流、字符流
1. 字节流 在前面的学习过程中,我们一直都是在操作文件或者文件夹,并没有给文件中写任何数据.现在我们就要开始给文件中写数据,或者读取文件中的数据. 1.1 字节输出流OutputStream Out ...
- 20个Python代码段，你需要立刻学会，好用到哭！
Python是一种非BS编程语言.设计简单和易读性是它广受欢迎的两大原因.正如Python的宗旨:美丽胜于丑陋,显式胜于隐式. 记住一些帮助提高编码设计的常用小诀窍是有用的.在必要时刻,这些小诀窍能够 ...
- PHP面试题2019年京东工程师面试题及答案解析
一.单选题(共28题,每题5分) 1.Apache与Nginx大访问下性能描述正确的是? A.Apache所采用的epoll网络I/O模型非常高效 B.Nginx使用了最新的kqueue和select ...
- 史上最全Winform中使用ZedGraph教程与资源汇总整理(附资源下载)
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
- leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- linux rz sz文件传输 ZModem协议
比ftp和scp方便点.需要用支持ZModem协议的工具,SecureCRT是可以的 rz: 接收文件 sz: 发送文件 安装 # sudo apt-get install lrzsz 使用 协议介绍 ...
- 文：你可以杀我，但你不能评价（judge）我
原创 豆瓣影评:“现代战争启示录”豆友影评 2006-12-18 20:24:20 本文刊载于<豆瓣影评>豆友“芹泽虾饺菌”的影评 原文标题<剃刀边缘的疯狂> 文/芹泽虾饺菌 ...