①：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. COMP2521: Assignment

    COMP2521: Assignment 2Social Network AnalysisA notice on the class web page will be posted after eac ...

  2. C++入门到理解阶段二基础篇(1)——简介与环境安装

    1.C++ 简介 C++ 是一种静态类型的.编译式的.通用的.大小写敏感的.不规则的编程语言,支持过程化编程.面向对象编程和泛型编程. C++ 被认为是一种中级语言,它综合了高级语言和低级语言的特点. ...

  3. httpclient超时时间设置及代理设置

    超时时间 设置HttpClient的超时时间,非常有必要性,因为httpclient 默认超时时间很长,自己可以测试一下是多久,设置超时时间否则会影响自己系统的业务逻辑,例如阻塞系统,影响系统的吞吐量 ...

  4. MySQL for OPS 11：优化

    写在前面的话 不管是作为运维还是作为 DBA,我们的工作都不是写 SQL,搞业务.更多的还是如何实现又好又快的给开发提供一个数据库环境和保障数据的安全性.前面的文章中读写分离,高可用,建立索引,分库分 ...

  5. springboot 2.0 配置 spring.jackson.date-format 不生效

    展开 问题:application.properties中的如下配置不生效,返回时间戳 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 原因分析: 拦截器 ...

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

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

  7. Windows下Django项目搭建流程

    1.创建虚拟环境 virtualenv test 2.进入虚拟环境 source ./项目名/Scripts/activate 3.创建项目 django-admin startproject 项目名 ...

  8. webpack关于CommonsChunkPlugin在高版本被移除的替代方案问题

    1.在指南的缓存章节里webpack.config.js文件中,使用new的方法会报错 const webpack = require('webpack'); + new webpack.optimi ...

  9. 848. Shifting Letters

    问题描述: 问题规约为:对每一个数组S,移动(shifts[0] + shitfs[1]+...+shitfs[i] )mod 26位 def shiftingLetters(self, S: str ...

  10. Linux 解决Deepin深度系统无法在root用户启动Google Chrome浏览器的问题

    解决Deepin无法在root用户启动Google Chrome浏览器的问题,步骤如下. 前提:如何用root用户登录系统?编辑 vim /etc/lightdm/lightdm.conf , 找到并 ...