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. win10安装Redis方法以及基本配置

    下载 下载地址点击下载地址,然后选择版本进行下载 下载的文件是一个zip压缩文件,解压后目录结构为: 进行安装 进入命令行模式打开Redis的安装目录 执行:redis-server.exe redi ...

  2. sql多表查询（单表查询略过）

    表library: 表borrow: 表reader: 1.等值连接:(常用) 原理:将多张表组合成一个逻辑大表,即字段相加记录相乘(笛卡尔积). 语法:select * from 表A,表B whe ...

  3. CSS3 2D转换 动画

    transform:translate(x,y): 过度  鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; trans ...

  4. [Data Structure] Tree - relative

    Segment Tree First, try to build the segment tree. lintcode suggest code: Currently recursion recomm ...

  5. SAZ文件的打开与保存

    保存 在Fiddler上,使用菜单“文件”>“保存” 可以将当前的HTTP请求信息保存成SAZ文件.   读取 在Fiddler上,使用菜单“文件”>“加载档案”可以读取SAZ文件,加载其 ...

  6. getfacl

    ACL即Access Control List 主要的目的是提供传统的owner,group,others的read,write,execute权限之外的具体权限设置,ACL可以针对单一用户.单一文件 ...

  7. wpf-x命名空间-Markup Extension(标记扩展)

    1.x:type 用于前端类型声明 与C#  代码 Type类似 2.x:Null 代表Null 某些时候需要显示的为一些值设置为空   前端为 x:Null   C# 中 为 Null 3.x:ar ...

  8. Qthread的使用方法

    1:重载 run()函数 2:将对象移到Qthread对象中 Movetothread 该方法必须通过信号 -槽来激发.

  9. 【转载】 星际争霸2的AI环境搭建

    原文地址: https://blog.csdn.net/qq_40244666/article/details/80957644 作者:BOY_IT_IT 来源:CSDN -------------- ...

  10. scrapy框架的日志等级和请求传参

    日志等级 请求传参 如何提高scrapy的爬取效率 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息 ...