`
淡淡的一抹
  • 浏览: 19046 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS选择器的常用规则

    博客分类:
  • CSS
 
阅读更多
CSS选择器的常用规则

(1) 组规则
语法:选择符1,选择符2,...,选择符n{属性1:值1; 属性2:值2;...;属性n:值n;}
示例:
/*定义H1的格式*/
H1 {
    font-weight: bold;/*字体的粗细,bold指粗体*/
    font-size: 12pt;/*字体尺寸,现在一般使用px,并不使用pt*/
    font-family: helvetica;/*字体类型,如宋体、黑体*/
    font-variant: normal;/*设置小型大写字母,normal为正常。*/
    font-style: normal;/*字体风格,例如斜体。normal代表标准字体。*/
}


(2)继承规则
当对一个HTML标签定义了CSS样式后,样式会自动继承给这个节点的所有子节点。

(3)类规则
通过“.”+类名对该类进行定义。
示例:
<!--通过类名设置标题的颜色-->
.list{color: red;}
<body>
    <h1 class="list">标题1</h1>
    <h1 class="list">标题2</h1>
    <h1 class="list">标题3</h1>
</body>


(4)ID规则
通过“#”+ID号对该元素进行设置。
示例:
#header{
    width: 800px;
    height: 125px;
    color: red;
}

<body>
    <div id="header">顶部横条</div>
</body>


(5)嵌套规则
嵌套规则可以指定一个路径来定义一个样式,规则中的选择符可以是类、ID或者基本选择符。
实例1:
<!-- 设置类“.reddish”的标签中的H1标签的样式 -->
.reddish h1{
    color: red;
}

<body>
    <div class="reddish">
        <h1>标题1</h1>
    </div>
</body>


示例2:
<!-- 改变继承关系 -->
p{color: red;}
p b{color: blue;}

<body>
    <p>
        红色
        <b>蓝色</b>
    </p>
</body>

分享到:
评论

相关推荐

    CSS选择器的使用技巧

     id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#...

    css--实验报告.doc

    1、了解了css的概念和特点,在网页中使用css的四种方式及选择器的语法格式及三 种选择器;标签选择器、类选择器和ID选择器。 2、掌握了CSSde 创建及管理方式和其中常用的属性,应用css+DIV进行页面布局的DIV标记,...

    前端css+html+布局笔记

    语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选中指定元素的...

    分布式通用爬虫平台(可视化生成css选择器,自定义设置抓取流程,正文自动提取,邮件通知).zip

    遵守规则: 为避免对网站造成过大负担或触发反爬虫机制,爬虫需要遵守网站的robots.txt协议,限制访问频率和深度,并模拟人类访问行为,如设置User-Agent。 反爬虫应对: 由于爬虫的存在,一些网站采取了反爬虫措施...

    CSS网站布局实录 (第二版)PDF版

    具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...

    CSS属性总结

    HTML 中CSS各类属性选择器,规则总结,常用的属性都有列出

    CSS语义化命名方式及常用命名规则

    如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边,那么这时content-left板块却在右边,板块位置与其命名完全不符,那么我们这时就要修改页面中的以及CSS样式中的选择器名字了,这样会很不方便,尤其...

    css入门笔记

    2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开...

    层叠样式表

    选择器其实就是CSS样式的名字,常用的选择器有:标记、类、ID、伪类等;声明用于定义元素样式,使用花括号将其包围起来,每条声明由属性(property)和值(value)组成,其中属性是希望设置的样式属性,属性和值之间...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款简单jQuery日历选择器代码 3.基于jquery实现倒计时钟插件下载,Flip-Down Clock特效效果 4.基于jquery实现多功能日历插件(weekcalendar)1.2版本下载 5.实用漂亮jQuery网页日历插件datePicker下载 6.简洁...

    HTML基础学习基础认知,适合小白玩

    选择器--群组联合选择器 样式规则的编写 常用的CSS属性 样式背景 样式边框 样式文本 样式字体 样式字体 其他样式 WEB基础 外边距 内边距 尺寸 溢出 定位 层叠顺序 对齐方式 CSS布局 清除浮动

    Tutorial-BootStrap:HTML,CSS,Javascript和BootStrap简介

    LIVE- 项目演示:DIY- CSS基础规则选择器链接外部CSS文件级联和继承项目演示:LIVE- 项目演示:DIY- JavaScript 什么是JavaScript 为什么要学习JavaScript 引导带什么是BootStrap 将BootStrap添加到您HTML页面从CDN...

    看完这个系列所有爬虫都easy!(二)Xpath+bs4双剑合璧

    通过搜索获取页面元素3.css选择器 一、XPath XPath 全称 XML Path Language,即 XML 路径语言,它是一门 XML 文档中查找信息的语言。它最初是用来搜寻 XML 文档的,但是它同样适用于 HTML 文档的搜索。 w3c官方教程 ...

    Anti AD-crx插件

    使用CSS选择器来隐藏广告,方式简单所以更轻更快 2. 可定制化过滤规则,本体只包含了少量网站的广告过滤规则,推荐根据自己使用习惯去屏蔽常用网站的广告 3. 自定义的过滤规则会跟当前账号信息一起同步,所以不用...

    爬虫开发初学者入门简单讲解的教程.docx

    解析网页的方法主要包括正则表达式、XPath和CSS选择器等。 三、爬虫开发环境搭建 1. 安装Python:Python是爬虫开发的主要语言,需要先安装Python环境。可以从Python官网下载对应版本的安装包进行安装。 2. 安装爬虫...

    PHPday02

    CSS三语法:选择器【selector】、属性和值 {property:value} 注释方法:/*···*/ html注释方法: – 样式 1、内联方式(行内模式) 被修饰的内容【仅作用于本标签 且不常用】 2、内部方式(内嵌样式) p{属性:值;...

    JavaScript开发的基本流程.doc

    选择合适的开发工具:为了提高开发效率和代码质量,选择适合的开发工具是非常重要的。这些工具可能包括代码编辑器、集成开发环境(IDE)以及版本控制系统等。 熟悉常用的JavaScript库和框架:为了提高开发效率和...

    webox盒子 v2.3.zip

    2、常用代码:支持HTML CSS JS PHP MYSQL等代码高亮显示和代码自动补全,根据用户习惯可自行编辑代码自动补全规则。通过将经常需要重复使用的代码保存到数据库中,可以很方便的调用以提高工作效率。 3、其他常用...

Global site tag (gtag.js) - Google Analytics