交集选择器：标签+类（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. android Fragment用法

    Fragment常用的三个类:android.app.Fragment 主要用于定义Fragmentandroid.app.FragmentManager 主要用于在Activity中操作Fragme ...

  2. Neo4j教程 Neo4j视频教程 Neo4j 图数据库视频教程

    课程发布地址 地址: 腾讯课堂<Neo4j 图数据库视频教程> https://ke.qq.com/course/327374?tuin=442d3e14 作者 庞国明,<Neo4j ...

  3. 1.4－动态路由协议OSPF④

    多区域的OSPF: 划分多区域的主要目的: 1.减少每个区域中的路由条目,进而减少每个路由器的内存中的路由,及其内存消耗,提高转发效率. 2.因为每一个OSPF区域对应在一个OSPF LSDB,配合在 ...

  4. putty SSH出现乱码

    解决方法如下: 打开PuTTY主程序 选择window-〉Appearance-〉Font settings-〉点击Change.按钮,字体中选择"新宋体". 选择window-〉 ...

  5. 智能家居APP开发

    智能家居APP开发 APP开发技术qq交流群:347072638 前言,随着智能硬件设备的流行,智能家居開始红火,智能家居就是家用电器的智能化.包含智能锁,灯,空调,灯,音箱等等,移动设备通过WIFI ...

  6. Professional, Entreprise, Architect版本的区别

    RAD Studio,Delphi和C ++ Builder有3个不同的版本:Professional,Enterprise和Architect.直到最近,我们还出售了一些企业版功能作为专业版的插件, ...

  7. Codesys——PLCopen基本运动控制功能块的使用方法总结

    MC_Halt 在MC_MoveVelocity模式下,用MC_Halt停止其轴,当前轴的状态由 ContinuousMotion(当前转速)--->DiscreteMotion(速度不为0)- ...

  8. 把TXT GB2312文件转换成TXT UTF8文件

    /// <summary>        /// 把TXT GB2312文件转换成TXT UTF8文件        /// </summary>        /// < ...

  9. AJAX-responseXML 属性

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,需要使用 responseXML 属性 cd_catalog.xml: <CATALOG><CD><T ...

  10. 数据库异常 ：java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    最近在新项目中突然出现了  java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) ...