①：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. ubuntu 16.04上源码编译和安装cgal并编写CMakeLists.txt | compile and install cgal on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/39ab7ed9/,欢迎阅读最新内容! compile and install cgal on ubuntu 16.04 Guide ...

  2. C# MediaPlayer

    using System.Windows.Media; using Newtonsoft.Json; using System.ComponentModel; namespace ConsoleApp ...

  3. 微信网站登录doem

    直接上代码 namespace CloudPrj.WeiXin {     public partial class index : System.Web.UI.Page     {         ...

  4. java基础(7):自定义类、ArrayList集合

    1. 引用数据类型(类) 1.1 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好 ...

  5. 定制Dynamics CRM标准导出功能：不能导出指定列的值

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复239或者20161203可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  6. FileProvider的使用

    还望支持个人博客站:http://www.enjoytoday.cn 概述 Android 7.0的新特性规定,对于android 7.0应用(仅仅对于android 7.0版本的sdk而言,若是编译 ...

  7. DevOps 工程师成长日记系列三：版本

    原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-part-3-versio ...

  8. redis做持久化的两种方式，RDB、AOF讲解

    redis的两种持久化方式: 1.RDB方式 概念:在指定的时间间隔内保存数据快照 实现方式: 找到redis的安装目录,修改redis的配置文件(redis.conf):① 修改备份的时间间隔:sa ...

  9. FileSizeLimitExceededException

    org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException 很明显,这异常的意思是文件大小 ...

  10. RDPGuard6.1.7之后的问题

    RDPGuard是一款保护远程桌面RDP端口不被暴力猜解的软件,说下在使用RDP Guard中遇到的一些问题: 1.似乎D版RDPGuard 6.1.7或之后的版本,启用IP Cloud会自动将大量I ...