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. 【golang】kafka

    这篇博客是用来记录用go安装及操作kafka库的时候踩到的坑~ 安装kafka库 首先我参考了博客:https://blog.csdn.net/tflasd1157/article/details/8 ...

  2. JavaWeb基础-过滤器监听器

    过滤器 1定义:过滤器是一个服务器的组件,他可以截取用户端的请求与响应信息,并对这些信息进行过滤;过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 2过滤器的工作原理: 3过滤器 ...

  3. Python基础10_函数

    直接贴笔记 : #!/usr/bin/env python # coding:utf-8 # 定义函数时要写成良好的注释习惯 通常用三个单引号 def test(x): ''' 计算一个y=2*x+1 ...

  4. MySQL：数据查询

    数据查询 一.基本查询语句 1.语法:写一行 select{*<字段列表>}//查询的字段,多个字段用逗号分开 from<表1>,<表2>…//数据表名 {//可选 ...

  5. 2017年3月28日15:59:16 终于明白spring这套鬼东西是怎么玩的了

    先说重点,新东家公司的项目框架没有一样是我之前用过的,首先pm和我说的是一套微服务的概念,微服务不同于传统的功能模块实现,他将服务松散化分不到各个系统之间,这样也是实现分散压力的一种. 微服务是由sp ...

  6. laravel 解决session保存不了，取不出的问题

    555  上传服务器的时候 storage下的framework 没有上传啊

  7. CSS设置全局字体

    在样式表或者页面head加上这个就可以了.分别是字体,字号,颜色,行高,总之要什么就写什么. body,td,th {font-family: Verdana, Arial, Helvetica, s ...

  8. JAVA高级篇(二、JVM内存模型、内存管理之第二篇)

    本文转自https://zhuanlan.zhihu.com/p/25713880. JVM的基础概念 JVM的中文名称叫Java虚拟机,它是由软件技术模拟出计算机运行的一个虚拟的计算机. JVM也充 ...

  9. Linux下pn532板子测试学校水卡

    0x01买板子 最便宜的板子pn532,需要买usb转串口的设备,对于kali-rolling,好像是通杀的,无论是PL2303,ch34X,FT232RL(没测试,这个更高端应该没问题),cp210 ...

  10. Codeforces1076F. Summer Practice Report（贪心+动态规划）

    题目链接:传送门 题目: F. Summer Practice Report time limit per test seconds memory limit per test megabytes i ...