交集选择器：标签+类（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. Docker Command

    1. #docker inspect id           这个命令给出和容器相关的所有信息(https://www.imooc.com/video/15730) 2. #docker searc ...

  2. CentOS 7: Install vsftpd

    Install vsftpd All commands should be run with ‘root’ user. Run the following command in terminal to ...

  3. PHP array_merge_recursive()

    定义和用法 array_merge_recursive() 函数与 array_merge()函数 一样,将一个或多个数组的元素的合并起来,一个数组中的值附加在前一个数组的后面.并返回作为结果的数组. ...

  4. HDU2193-AVL-数据结构-AVL

    题目链接:http://acm.hdu.edu.cn/statistic.php? pid=2193&from=126&lang=&order_type=0 好吧.水题一道,原 ...

  5. Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）

    我们有时候会遇到这么一个情况.就是我在一个ListView里面须要显示的东西事实上是有种类之分的.比方我要分冬天,夏天.秋天.春天,然后在这每一个季节以下再去载入各自的条目数据. 还有,比方我们的通讯 ...

  6. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...

  7. Codeforces Round #211 (Div. 2)B. Fence

    B. Fence time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. bzoj2538: [Ctsc2000]公路巡逻

    超车这个东西这么恶心肯定是要暴力求的(自圆其说) 那么分成一个个时间段来搞,然后DP一下 化一下那个速度,耗费时间是在300s~600s之间的 那我们就可以设f[i][j]为走到第i个位置用了j的时间 ...

  9. Flume Netcat Source

    1.cd /usr/local2/flume/conf sudo vim netcat.conf # Name the components on this agent a1.sources = r1 ...

  10. Word中公式和文字混排对齐的问题

    全选-字体-字符间距-位置-标准-确定 段落-中文版式-文本对齐方式-居中-确定