交集选择器：标签+类（ID）选择器{属性：值；}。即要满足使用了某个标签，还要满足使用了类（id）选择器。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div.box{

            color:#b6ff00;

        }

        p#miss{

            color:#ff6a00;

        }

    </style>

</head>

<body>

    <div class="box">哈哈</div>

    <p class="box">哈哈</p>

    <p id="miss">哈哈</p>

</body>

</html>

并集选择器：选择器+，+选择器+，选择器{属性:值;}。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box,p,strong{

            color:#ff6a00;

        }

    </style>

</head>

<body>

    <div class="box">哈哈</div>

    <p>哈哈</p>

    <strong>哈哈</strong>

</body>

</html>

后代选择器：选择器+空格+选择器{属性：值;}。后代选择器首选要满足包含（嵌套）关系。父集元素在前边，子集元素在后边。无限制隔代。只要能代表标签，标签、类选择器、ID选择器自由组合。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div .box p{

            color:#ffd800;

        }

    </style>

</head>

<body>

    <div>

        <div class="box">

            <p>哈哈</p>

        </div>

    </div>

</body>

</html>

子代选择器：选择器>选择器{属性:值;}。选中直接下一代元素，无法选中孙子代。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div>p{

            color:#ff6a00;

        }

    </style>

</head>

<body>

    <div>

        <p>哈哈哈</p>

    </div>

</body>

</html>

html——标签选择器的更多相关文章

  1. jQuery标签选择器

    $(function() { //alert("hello jquery"); //选择器 //id选择器 $("#bt1").click( function( ...

  2. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  3. css标签选择器

    /*标签选择器*/ input[type="text"] { width: 60%; } </style>

  4. jquery基本选择器：id选择器、class选择器、标签选择器、通配符选择器

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...

  5. H5 标签选择器

    08-标签选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是标题 <!DOCTYPE html> <html lang="en"> <he ...

  6. CSS 标签选择器

    CSS 标签选择器 再<stype>标签内,通过指定输入标签来配置CSS样式 <html> <head> <!-- style 设置头部标签--> &l ...

  7. css之标签选择器

    标签(空格分隔): 标签选择器 选择器定义: 在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素 ...

  8. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  9. 第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签

    第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需 ...

  10. 设计标签选择器TitleSwitch

    设计标签选择器TitleSwitch 效果如下: 源码如下: TitleSwitch.h 与 TitleSwitch.m // // TitleSwitch.h // TitleSwitch // / ...

随机推荐

  1. 小朋友的数字(codevs 3293)

    题目描述 Description 有n个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数 ...

  2. [bzoj1617][Usaco2008 Mar]River Crossing渡河问题_动态规划

    River Crossing渡河问题 bzoj-1617 Usaco-2008 Mar 题目大意:题目链接. 注释:略. 想法:zcs0724出考试题的时候并没有发现这题我做过... 先把m求前缀和, ...

  3. P3383 【模板】线性筛素数 洛谷

    https://www.luogu.org/problem/show?pid=3383#sub 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输 ...

  4. Ubuntu 16.04安装7zip

    搜索时发现7zip有两个:p7zip,p7zip-full,p7zip-rar.研究发现: p7zip:包含7zr(最小的7zip归档工具),仅仅只能处理原生的7z格式. p7zip-full:包含7 ...

  5. mysql中有关树的函数

    用mysql客户端在库中建立函数queryOrgChildren(查找子节点)和queryOrgLevel(查看当前节点在树中的级别):DROP FUNCTION IF EXISTS `queryOr ...

  6. 3、Java并发性和多线程-多线程的代价

    以下内容转自http://ifeve.com/costs-of-multithreading/: 从一个单线程的应用到一个多线程的应用并不仅仅带来好处,它也会有一些代价.不要仅仅为了使用多线程而使用多 ...

  7. oracle11g dataguard failover重建后归档日志没有被应用被NO的问题

    1.主库从库归档记录不一致.例如以下所看到的: 做完failover后,坏的旧主库变成了新的从库,可是新从库的归档日志记录不一致,就是archive log list;出来的和v$archived_l ...

  8. C++学习之模板特例化

    模板是C++中一个很重要的特性,写一份代码能用于多种数据类型(包括用户自定义类型).例如,STL的sort()函数可以用于多种数据类型的排序,类stack可以用作多种数据类型的栈.但是,如果我们想对特 ...

  9. 【MVC框架】——View和Controller之间的传值

    在MVC中,Controller运行一个能够说是路由功能.它通过View传过来的数据,来决定应该调用哪一个Model,相同会把Model处理完的数据传给View,所以就总是涉及到Controller和 ...

  10. vim随想笔记(1)

    本人是一个vim的狂热粉丝,越是使用vim,越是认为琐碎内容太多,时不时地出现一些自己没有见过的使用方法.命令. 因此准备在博客上用空余时间在阅读<学习vi和vim编辑器>的基础上总结一下 ...