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. leetcode python 032 识别最长合法括号

    # 给定一个只包含字符'('和')'的字符串,# 找到最长的有效(格式良好)括号子字符串的长度.# 对于“(()”,最长的有效括号子串是“()”,其长度为2.# 另一个例子是“)()())”,其中最长 ...

  2. Charles抓包基本用法

    Charles抓包 浏览器发送和接受的所有请求都可以抓到 1.可以定位问题(如果看不出来是服务端问题还是前端问题) 2.可以设置弱网模式 清空请求按钮如图: 抓包: 1 打开charles,在浏览器中 ...

  3. 使用map()的小陷阱：parseInt

    假设我们想要把一个字符串数组的每一项转换成整数,我们很自然就想到了把parseInt作为回调函数传给map()函数,但这样做可能会出现意想不到的结果: var strArr = ["1&qu ...

  4. java面向对象编程(四)--类变量、类方法

    1.什么是类变量? 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. 如何定义类变量? 定义语法:     ...

  5. Linux系统-tcpdump常用抓包命令

    主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络数据 过滤端口:  tcpdump -i e ...

  6. 剑指Offer 36. 两个链表的第一个公共结点 （链表）

    题目描述 输入两个链表,找出它们的第一个公共结点. 题目地址 https://www.nowcoder.com/practice/6ab1d9a29e88450685099d45c9e31e46?tp ...

  7. 大道至简第一章读后感JAVA伪代码形式

    观看了<大道至简>第一章后,从愚公移山的故事中可以发现愚公移山其实可以看作是一个一个项目,下面用JAVA伪代码形式编写: Import java(愚公移山) //愚公移山 public c ...

  8. centos7 ssh连接慢

    指的是连接到centos7,输入密码后要等很久才会返回.之前很多人遇到的问题都是由于/etc/ssh/sshd_config的UseDNS配置项和GSSAPIAuthentication配置项引起的, ...

  9. VSCode 常用的快捷键

    R键:点击后热加载,直接查看预览结果 P键: 在虚拟机中显示网格,常用 O 键:切换iOS 和Android Q键 :退出调试 ctr +~  打开 终端

  10. PHP批量生成手机号

    <?php //匹配手机号的正则表达式 #^(13[0-9]|14[47]|15[0-35-9]|17[6-8]|18[0-9])([0-9]{8})$# $arr = array( 130,1 ...