1.CSS派生选择器

概念：通过依据元素在其位置的上下文关系来定义样式。

实例：

<!--index.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="mycss.css" type="text/css" rel="stylesheet">

</head>

<body>

    <p><strong>p-label :hello css</strong></p>

    <ul>

        <li><strong>li-label :hello cess</strong></li>

    </ul>

</body>

</html>
/*mycss.css*/

li strong{

    color: brown;

}

strong{

    color: blue;

}

运行结果：

2、id选择器

概念：

　　id选择器可以为标有id的HTML元素制定特定的样式

　　id选择器以“#”来定义

注：id选择器和派生选择器可以结合使用

实例：

<!--index02.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="mycss02.css" type="text/css" rel="stylesheet">

</head>

<body>

    <p id="pid">hello css <a href="http://www.baidu.com">baidu</a></p>

    <div id="divid">

        this is a div style

    </div>

</body>

</html>
/*mycss02.css*/

#pid{

    color: blue;

}

#pid a{

    color: blueviolet;

}

#divid{

    color: brown;

}

运行结果：

3、CSS类选择器

概念：类选择器以一个点显示

　　   class也可以用作派生选择器

<!--index.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="mycss.css" type="text/css" rel="stylesheet">

</head>

<body>

    <p class="p-class">this is a class style <a href="#">baidu</a></p>

    <div class="div-class">

        Hello div！

    </div>

</body>

</html>
/*mycss.css*/

.p-class{

    color: blueviolet;

}

.p-class a{

    color: darkcyan;

}

.div-class{

    color: brown;

}

运行结果：

4、属性选择器

概念：对带有指定属性的HTML样式设置样式

属性和值选择器

实例：

<!--index.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        [title]{

            color: blue;

        }

        [title=te]{

            color: blueviolet;

        }

    </style>

</head>

<body>

    <p title="t">attribute selectors：属性选择器</p>

    <p title="te">attrubute and value selectors：属性和值选择器</p>

</body>

</html>

运行结果：

二、CSS选择器的更多相关文章

  1. HTML 网页开发、CSS 基础语法——十二.CSS选择器

    选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...

  2. HTML中放置CSS的三种方式和CSS选择器

    (一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用.   第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...

  3. css 选择器；盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  4. CSS选择器与XPath语言

    一 在爬取页面信息的过程中,需要到想要的信息进行定位,主要有两种方法.CSS选择器和XPath语言.查找某一个标签,两种方法都可以做到. 二 CSS选择器 http://www.w3school.co ...

  5. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

  6. 朝花夕拾《精通CSS》二、选择器 & 层叠

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  7. CSS基础知识笔记(二)之选择器

    CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...

  8. CSS入门介绍（二）CSS选择器

    css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...

  9. CSS选择器（二）

    五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...

  10. Selenium(五)：CSS选择器(二)

    1. CSS选择器 1.1 选择语法联合使用 CSS selector的另一个强大之处在于:选择语法可以联合使用. html代码: <div id='bottom'> <div cl ...

随机推荐

  1. javascript 预解析

    内容来源:http://www.cnblogs.com/TomXu/archive/2011/12/28/2286877.html JavaScript中,你可以在函数的任何位置声明多个var语句,并 ...

  2. day16_python_1124

    圈子 圈子是互相影响,走着走着就散了. 道不同不相为谋,与人的认知相关. 圈子如何正向引导? 圈子能决定你的人生走向. 圈子能决定你的格局. 01 昨日内容回顾 序列化模块 将一个数据结构 ----& ...

  3. Crontab中的除号（slash）到底怎么用？（转载）

    转载于:https://www.cnblogs.com/cocowool/p/5865397.html crontab 是Linux中配置定时任务的工具,在各种配置中,我们经常会看到除号(Slash) ...

  4. C++ allocator

    C++ allocator http://www.cnblogs.com/wpcockroach/archive/2012/05/10/2493564.html 说一说C++里的allocator.我 ...

  5. 阶段01Java基础day18集合框架04

    18.01_集合框架(Map集合概述和特点) A:Map接口概述 查看API可以知道: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 B:Map接口和Collection接 ...

  6. ServiceStack.Redis遇到的问题：ServiceStack.Redis.Generic.RedisTypedClient`1”的方法“get_Db”没有实现。

    问题: ServiceStack.Redis.Generic.RedisTypedClient`1”的方法“get_Db”没有实现. 解决方案: step 1::引用的三个 包版本保持一致 Servi ...

  7. Java log4j

    <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging& ...

  8. THML

    结构<!DOCTYE html> <html> <head> <meta   charset="UTF-8> <titie>< ...

  9. 3.oracle与mysql的区别

    1．自动增长的数据类型处理     MYSQL有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值.ORACLE没有自动增长的数据类型,需要建立一个自动增长的序列号,插入记录时要把序列号的 ...

  10. 创建一个vue 项目 必备的几个插件

    第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  - ...