①：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. javascript实现base64编码、解码

    我们知道,浏览器的window对象提供有window.atob()和window.btoa()方法可以对字符串进行Base64编码和解码. console.log(window.btoa(window ...

  2. SAS与SATA的区别

    SAS SATA的区别 协议方面 SAS(Serial Attached SCSI)即串行连接SCSI,SATA(Serial Advanced Technology Attachment)即串行高级 ...

  3. springboot with appache sharding 3.1 单库分表

    配置文件相关信息: #开发 server.port=7200 spring.application.name=BtspIsmpServiceOrderDev eureka.client.service ...

  4. Hystrix失败处理逻辑解析

    在上篇文章Hystrix工作流程解析中,我们整体介绍了Hystrix的工作流程,知道了Hystrix会在下面四种情况下发生降级: 熔断器打开 线程池/信号量跑满 调用超时 调用失败 本篇文章则介绍一下 ...

  5. SpringCloud服务调用源码解析汇总

    相信我,你会收藏这篇文章的,本篇文章涉及Ribbon.Hystrix.Feign三个组件的源码解析 Ribbon架构剖析 这篇文章介绍了Ribbon的基础架构,也就是下图涉及到的6大组件: Ribbo ...

  6. JS基础语法---冒泡顺序

    冒泡排序: 把所有的数据按照一定的顺序进行排列(从小到大,从大到小) 1. 画图帮助理解如下: 2. 从小到大排序: var arr = [10, 0, 100, 20, 60, 30]; //循环1 ...

  7. [转]Eclipse插件开发之基础篇(4) OSGi框架

    原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/18/eclipse_plugin_1_2_1.html 1. 什么是OSGi框架 OSGi(O ...

  8. [b0022] python 归纳 (八)_多进程_基本使用

    # -*- coding: UTF-8 -*- """ 测试进程使用 multiprocessing.Process 使用: 1. 准备一个函数<fun>,子 ...

  9. 《Python自动化测试九章经》

    Python是当前非常流行的一门编程语言,它除了在人工智能.数据处理.Web开发.网络爬虫等领域得到广泛使用之外,他也非常适合软件测试人员使用,但是,对于刚入行的测试小白来说,并不知道学习Python ...

  10. Falling back to java on path. This behavior is deprecated

    windows启动elasticsearch报错:warning: Falling back to java on path. This behavior is deprecated. Specify ...