交集选择器：标签+类（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. 二维数组的查找，刷题成功——剑指Offer

    今天又做了一道题目,通过啦,欧耶! https://www.nowcoder.net/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&tqI ...

  2. HDOJ 5402 Travelling Salesman Problem 模拟

    行数或列数为奇数就能够所有走完. 行数和列数都是偶数,能够选择空出一个(x+y)为奇数的点. 假设要空出一个(x+y)为偶数的点,则必须空出其它(x+y)为奇数的点 Travelling Salesm ...

  3. How to Use DHCP Relay over LAN? - DrayTek Corp

    Assuming Vigor2960 has two LAN networks. Network Administrator wants that, when the internal DHCP is ...

  4. PHP正则表达式-从文本中提取URL

    1.从文本中提取URL的正则表达式 '/https?:\/\/[\w-.%#?\/\\\]+/i'

  5. git的基本操作流程

    1.git clone 初始会有默认的master分支,并且master和origin/master自动建立了映射关系 2. git checkout -b local    创建并且切换到local ...

  6. WPF，Silverlight与XAML读书笔记（3） - 标记扩展

    hystar的.Net世界 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 103  文章- 0  评论- 107  WPF,Silverlight与XAML读书笔记(3) - 标记扩展   说 ...

  7. CF36 E Two Paths——欧拉(回)路

    题目:http://codeforces.com/contest/36/problem/E 给定一张无向图,要求输出两条欧拉路覆盖所有边: 分类讨论,首先判-1:有两个以上连通块 / 有四个以上奇度数 ...

  8. bzoj2844

    http://www.lydsy.com/JudgeOnline/problem.php?id=2844 线性基... 先把线性基搞出来,然后不断逼近答案,如果这个基比答案小了,那么说明要加上,同时加 ...

  9. 关于pycharm中pip版本10.0无法使用的解决办法

    背景: 近期在利用 pycharm 安装第三方库时会提示 pip 不是最新版本, 因此对 pip 进行更新,但是生成最新版本之后, pip 中由于缺少 main 函数,导致在 pycharm 中无法自 ...

  10. 使用psutil模块获取电脑运行信息

    psutil是python的一个用于获取cpu信息的模块,非常好使,以下附上官方的一些example: CPU-> Examples >>> import psutil > ...