<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>高级选择器</title>

    <style>

        /*交集选择器*/

        /*既是P标签，类名称又会text的元素字体变为红色*/

        p.text{

            color: red;

        }

        /*并集选择器*/

        /*让container下的所有元素内容为蓝色*/

        #container p,span,em,strong{

            color: blue;

        }

    </style>

</head>

<body>

    <!--交集选择器-多个选择器包含的元素-->

    <p>好好学习1</p>

    <p class="text">好好学习2</p>

    <p class="text">好好学习3</p>

    <p>好好学习4</p>

    <!--并集选择器-多个选择所有匹配的元素-->

    <div id="container">

        <p>好好学习1</p>

        <span>好好学习2</span><br>

        <em>好好学习3</em><br>

        <strong>好好学习4</strong>

    </div>

</body>

</html>

03.CSS选择器-->交集并集选择器的更多相关文章

  1. CSS 交集选择器和并集选择器

    交集选择器是and 也就是要同时满足 且只能交2个只能交2个只能交2个,第一个是标记,第二个是class或者id,之间不可以有空格 eg:  span.small-height 并集选择器是or,也就 ...

  2. 使用CSS的类名交集复合选择器

    首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接 ...

  3. 使用css的类名交集复合选择器 《转》

    复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...

  4. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  5. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  6. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  7. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  8. css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

    高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...

  9. python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

    11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...

随机推荐

  1. iOS 基础之NSArray数组去重

    1.面试题 现在有一个数组arr1,它里面存储的字符串分别为@“zhangsan”@“lisi”@“wangwu”@“lisi”@“zhangsan”,请将它去重后赋值给可变数组arr2输出为:@“z ...

  2. 【python】10分钟教你用python打造贪吃蛇超详细教程

    10分钟教你用python打造贪吃蛇超详细教程 在家闲着没妹子约, 刚好最近又学了一下python,听说pygame挺好玩的.今天就在家研究一下, 弄了个贪吃蛇出来.希望大家喜欢. 先看程序效果: 0 ...

  3. 解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column 'headline' at row 1")

    解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column ...

  4. J2SE基本安装和java的环境变量

    J2SE基本安装和java的环境变量   1. 首先登录http://www.oracle.com,下载JDK(J2SE) JDK有很多版本其中JDK 1.0,1.1,1.2,1.3,1.4 1.5 ...

  5. node.js常用命令

    安装node 验证是否安装node $node -v $npm -v npm node package manager , Node 的包管理器 安装 包 # 安装到当前目录 $ npm instal ...

  6. initializer_list

    initializer_list是一种模板类型,定义initializer_list对象是,必须说明列表中所含元素的类型: initializer_list<Type> lst{a, b, ...

  7. #Go# 常用类型转换

    #string 2 int int, err := strconv.Atoi(string) #string 2 int64 int64, err := strconv.ParseInt(string ...

  8. 【算法笔记】B1052 卖个萌

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805273883951104 #include <math ...

  9. order by中用子查询排序

    今天有个需求是对一个列表排序,但是排序字段是在另一个表中,不想用关联查询,就想能否直接在order by中用子查询,后来找到一个还挺好使.记录如下. 排序语句如下: select * from mai ...

  10. Secondary NameNode究竟是做什么的

    Secondary NameNode:它究竟有什么作用? 在hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备 ...