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. css3实现好看的边框效果

    1.html结构 <div class="box">box</div> <br> <div class="border1&quo ...

  2. javascript 位操作符

    not: 按位非,符号为波浪线~ 作用吧二进制数的所有位进行非操作,对应的十进制结果为原先10进制数字取负值然后减去1 其他的操作符感觉不是很常用,分别为按位与(&),按位或(|),左移(&l ...

  3. windows下安装rabbitmq的步骤详解

    (仅作为个人的备忘记录) Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang.通过下面两个连接可以下载安装最新的版本: 下载并安装Eral ...

  4. Android开发 ---构建对话框Builder对象，消息提示框、列表对话框、单选提示框、多选提示框、日期/时间对话框、进度条对话框、自定义对话框、投影

    效果图: 1.activity_main.xml 描述: a.定义了一个消息提示框按钮 点击按钮弹出消息 b.定义了一个选择城市的输入框 点击按钮选择城市 c.定义了一个单选提示框按钮 点击按钮选择某 ...

  5. 18-10-09 Linux常用命令大全（非常全！！！）

     Linux常用命令大全(非常全!!!)   Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制, ...

  6. 2017-9-3模拟赛T2 取数(win)

    题目 题解 做法1: 直接暴力枚举每个数是否被选出,计算平均数-中位数,并与当前答案进行比较.复杂度O(2^n),能过60%的数据. 做法2: 将每个数排序后枚举中位数. 首先,取奇数个数一定更优.容 ...

  7. the principle of redbalck tree

  8. 剑指Offer 32. 把数组排成最小的数 （数组）

    题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 题目地址 h ...

  9. Selenium·自动化框架集成

    date:2018513 day08aft 一.自动化框架集成分层 1.config 配置(项目配置——测试环境,公司环境,线上环境:以中国人才热线登陆为例,网址.用户名.密码等) 2.public ...

  10. 深入理解Java中的同步静态方法和synchronized（class）代码块的类锁

    一.回顾学习内容 在前面几篇博客中我我们已经理解了synchronized对象锁.对象锁的重入.synchronized方法块.synchronized非本对象的代码块, 链接:https://www ...