①：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个选择器-个人向的更多相关文章

  1. CSS最常用的三种选择器

    标签选择器 样式的名称和标签的名称相同,如示例中的p标签,则对应名称为p的样式,若页面中有多个p标签,则这些p标签共同享用该样式 p{ color:blue; } <p>标签选择器< ...

  2. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  4. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  5. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  6. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  7. 爬虫常用Xpath和CSS3选择器对比

    爬虫常用Xpath和CSS3选择器对比 1. 简介 CSS是来配合HTML工作的,和Xpath对比起来,CSS选择器通常都比较短小,但是功能不够强大.CSS中的空白符' '和Xpath的'//'都表示 ...

  8. css的常用知识点

    一.css的引入方式 1.行内引入 直接在标签中定义样式 <p style="background-color: red">test</p> 2.嵌入式引入 ...

  9. css知多少（5）——选择器（转）

    css知多少(5)——选择器   1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得 ...

随机推荐

  1. Java-100天知识进阶-Java内存-知识铺（四）

    知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. 1.Java内存模型是每个java程序员必须掌握理解的 2.Java内存模型的主要目标 ...

  2. PriorityBlockingQueue

    public class PriorityBlockingQueueTest { /** * 有优先级顺序的阻塞队列,底层实现是数组,无边界.默认是11. * 构造方法可以传入一个比较器,不传的话,默 ...

  3. 基于 H5 + WebGL 实现的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  4. 13. 罗马数字转整数(C#)

    看到这道题,存在键值对,所以先建个泛型字典,把键值填进去. 由于这道题存在两个字符表示一个数字的情况,所以在for循环的时候判断一下,看看当前字符串中循环到的字符是否和下一个字符能够组成存在在字典里的 ...

  5. 17个常见的Python运行时错误

    对于刚入门的Pythoner在学习过程中运行代码是或多或少会遇到一些错误,刚开始可能看起来比较费劲.随着代码量的积累,熟能生巧当遇到一些运行时错误时能够很快的定位问题原题.下面整理了常见的17个错误, ...

  6. Google在情报搜集中的基础技巧

    Google在情报搜集中的基础技巧 作者:王宇阳 时间:2019-06-06 作者笔记 ​ Google Hacking 是指使用特定的高级的google搜索语法,收集渗透测试目标的信息,查找目标的配 ...

  7. 【转载】Android 的 Handler 机制实现原理分析

    handler在安卓开发中是必须掌握的技术,但是很多人都是停留在使用阶段.使用起来很简单,就两个步骤,在主线程重写handler的handleMessage( )方法,在工作线程发送消息.但是,有没有 ...

  8. Python当中的array数组对象

    计算机为数组分配一段连续的内存,从而支持对数组随机访问:由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加.数组的基本地址就是数组的第一项的机 ...

  9. python3+Scrapy爬虫使用pipeline数据保存到文本和数据库，数据少或者数据重复问题

    爬取的数据结果是没有错的,但是在保存数据的时候出错了,出现重复数据或者数据少问题.那为什么会造成这种结果呢? 其原因是由于Spider的速率比较快,而scapy操作数据库操作比较慢,导致pipelin ...

  10. Ubantu搭建虚拟环境

    配置虚拟环境 Ubantu16.0.4 1.安装python虚拟环境 sudo apt-get install virtualenv 2.vrtaulenvwrapper是virtualenv的扩展包 ...