①：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. zookeeper — 实现分布式锁

    一.前言 在之前的文章中介绍过分布式锁的特点和利用Redis实现简单的分布式锁.但是分布式锁的实现还有很多其他方式,但是万变不离其宗,始终遵循一个特点:同一时刻只能有一个操作获取.这篇文章主要介绍如何 ...

  2. oracle学习笔记（十一） 高级查询

    高级查询 分组查询 select * from student [where ] [having ] --二次限定 [order by] --asc升序 desc降序 默认升序 查看EMPLOYEE表 ...

  3. JQuery学习笔记（4）——ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) 原生 例子 点击按钮,访问服务器上的ajax_info.txt文件,获得txt ...

  4. log4net的配置及使用

    网上查了有很多种写法和配置,结果百度出来都是几种方法混合写法,拷在一起结果还不能正常运行.因此把自己做成功的代码写上来做个备份. 运行环境:log4net 2.03版本,.net 4.5 大体步骤为: ...

  5. ASP.NET MVC AJAX 请求中加入 antiforgerytoken 解决“所需的防伪表单字段“__RequestVerificationToken”不存在”问题

    在ASP.NET mvc中如果在表中使用了@Html.AntiForgeryToken(),ajax post不会请求成功 解决方法是在ajax中加入__RequestVerificationToke ...

  6. Python--方法／技巧在哪用的典型例子

    就我个人在学习Python的过程中,经常会出现学习了新方法后,如果隔上几天不用,就忘了的情况,或者刚学习的更好的方法没有得到应用,还是沿用已有的方法,这样很不利于学习和掌握新姿势,从而拉长学习时间,增 ...

  7. git clone和git pull的区别

    1.需不需要本地文件夹是仓库 git clone是将整个工程复制下来所以,不需要本地是仓库(没有.git文件夹)   git clone git pull需要先初始化本地文件夹文一个仓库   git ...

  8. 浅谈Java中switch分支语句

    前言: 在程序中遇到多分支选择的时候,想必大家都喜欢用if...else if...else...语句,尤其是初学者,因为在了解switch语句之前,我也是只会用if...else语句.那么现在看完这 ...

  9. 外置 tomcat 服务器设置

    外置 Tomcat 没这么太用, 今天在 windows  搭 xwiki  服务器, 比预期多花了点时间, 主要是 tomcat 环境变量没配对, tomcat 启动后闪退, 还没有日志. 最后定位 ...

  10. 概要设计文档（final）

    1. 引言部分 引言部分主要说明编写目的.系统的范围和参考资料等. 1.1目的 该文档的目的是描述“自习吧”微信小程序的概要设计,主要内容包括系统功能简介.系统结构设计.模块设计和界面设计等. 本文档 ...