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节点上?就不得 ...
随机推荐
- PHP判断设备访问来源
/** * 判断用户请求设备是否是移动设备 * @return bool */ function isMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (is ...
- StreamWriter StreamReader
private void WriteLoginJsonData(object jsonData) { using (FileStream writerFileStream = new FileStre ...
- JS基础语法---数组案例---9个练习
练习1:求数组中所有元素的和 var arr1 = [10, 20, 30, 40, 50]; var sum = 0; for (var i = 0; i < arr1.length; i++ ...
- h5本地存储登录页面实现记住密码功能
<!DOCTYPE html> <html> <head> <title></title> </head> <style ...
- Mybatis书写
Mybatis设置主键和自增 方法1: <insert id="insert" parameterType="Person" useGeneratedKe ...
- ubuntu安装cairo
查看网上大神们的各种安装经过,最后google之后执行下面两句就搞定了:apt-get install python-cairo apt-get install libcairo2
- Ubuntu18.04安装配置
GPT硬盘安装Ubuntu 磁盘管理工具压缩一个5GB的Fat32的分区,然后将ISO文件解压到Fat32分区 利用Hasleo EasyUEFI工具添加EFI引导 *:\EFI\BOOT\grubx ...
- vue+node+elementUI实现注册功能
后端代码 在后端的文件 routes文件夹下的connect.js文件中 // 引入mysql const mysql = require('mysql'); // 创建连接对象 const conn ...
- PAT 1145 1078| hashing哈希表 平方探测法
pat 1145: 参考链接 Quadratic probing (with positive increments only) is used to solve the collisions.:平方 ...
- Html学习之十八（表格与表单学习--统计表制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...