CSS - 选择器相关
1. 标签选择器
/*
标签选择器 : 会将样式作用在当前网页所有的指定标签上
标签名 {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
table {
width: 300px;
height: 200px;
border: solid 3px;
}
2. id选择器
/*
id选择器 : 会将样式作用在指定的标签上
#标签的id属性的值 {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
#tb {
background-color: blue;
}
<table id="tb">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
3. 类选择器
/*
类选择器 : 会将样式作用在所有的指定的class标签上
(点).标签的class属性的值 {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
.tc {
color: green;
}
<table>
<tr>
<td class="tc">1</td>
<td>2</td>
<td class="tc">3</td>
</tr>
</table>
4. 全部选择器
/*
全部选择器 : 作用在所有的页面标签上
* {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
* {
font-size: 20px;
}
5. 组合选择器
/*
组合选择器 : 多种选择器的组合, 选择器之间用逗号隔开
选择器1,选择器2,.... {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
#tid, .tc {
color: red;
}
<table>
<tr>
<td id="tid">1</td>
<td>2</td>
<td class="tc">3</td>
</tr>
<tr>
<td>4</td>
<td class="tc">5</td>
<td>6</td>
</tr>
</table>
6. 后代选择器
/*
后代选择器 : 样式会作用在选择器1下的所有选择器2上, 选择器之间用空格隔开
选择器1 选择器2 {
样式名1: 样式值1;
样式名2: 样式值2;
......
}
*/
#tr1 td {
color: red;
}
<table>
<tr id="tr1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
7. 属性选择器
/*
属性选择器 : 样式会作用在标签中对应的属性值的标签上
标签名[属性名=属性值]
*/
td[id='tName'] {
color: red;
}
<table>
<tr>
<td id="tName">1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
CSS - 选择器相关的更多相关文章
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
- CSS选择器、优先级与匹配原理(转)
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS样式表及选择器相关内容(一)
CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...
- CSS的相关知识——背景,超链接,列表,表格,奇偶选择器
接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色 rgb函数设置 2.background-image 背景图片 url(“logo.jp ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- CSS之选择器相关
一.选择器的作用 选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条 ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
随机推荐
- Flex birdeye笔记
1.将官网示例demo运行起来 新建Flex项目,直接将官网src下的demo拷贝到新建的项目的src下 .将官网example-binaries目录下的文件拷贝到新建项目的bin-debug下即可 ...
- LightOJ-1253-Misere Nim-nim博弈
Alice and Bob are playing game of Misère Nim. Misère Nim is a game playing on k piles of stones, eac ...
- access数据库调用
1.工程环境配置(vs+qt) 点击项目,右键,选择项目设置,选择SQL 2.获取自己数据库的驱动版本有哪些,如下代码所示: QStringList drivers = QSqlDatabase::d ...
- axios全局拦截响应
在系统开发过程中,若遇到长时间未操作,则需要将页面跳转到登录页面.因为现在都是前后端分离的开发模式,路由跳转都交给前端,而后端只返回一个报错信息,例如"errorMsg":&quo ...
- Python分布式爬虫必学框架scrapy打造搜索引擎✍✍✍
Python分布式爬虫必学框架scrapy打造搜索引擎 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身 ...
- 知识图谱+Recorder︱中文知识图谱API与工具、科研机构与算法框架
目录 分为两个部分,笔者看到的知识图谱在商业领域的应用,外加看到的一些算法框架与研究机构. 文章目录 @ 一.知识图谱商业应用 01 唯品金融大数据 02 PlantData知识图谱数据智能平台 03 ...
- linux格式化磁盘
linux格式化磁盘 查看系统磁盘情况 [root@db02 ~]# fdisk -l #查看当前系统上所有存储设备(包括挂在和没挂载的) 注:如果没有管理员权限是看不见磁盘的,因为fdisk默认读 ...
- iOS进阶二-KVC
概述 KVC的全程是Key-Value Coding, 俗称"键值编码",可以通过一个key来访问属性 常见的AP有 - (void)setValue:(nullable id)v ...
- Android开发 retrofit入门讲解 (RxJava模式)
前言 retrofit除了正常使用以外,还支持RxJava的模式来使用,此篇博客讲解如何使用RxJava模式下的retrofit 依赖 implementation 'com.squareup.ret ...
- 微信公众号支付出现:“当前页面的URL未注册”
微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示.解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调U ...