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 - 选择器相关的更多相关文章

  1. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  2. CSS选择器、优先级与匹配原理(转)

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  5. CSS的相关知识——背景,超链接,列表,表格,奇偶选择器

    接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jp ...

  6. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  7. CSS之选择器相关

    一.选择器的作用 选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条 ...

  8. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  9. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

随机推荐

  1. Flex birdeye笔记

    1.将官网示例demo运行起来 新建Flex项目,直接将官网src下的demo拷贝到新建的项目的src下  .将官网example-binaries目录下的文件拷贝到新建项目的bin-debug下即可 ...

  2. 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 ...

  3. access数据库调用

    1.工程环境配置(vs+qt) 点击项目,右键,选择项目设置,选择SQL 2.获取自己数据库的驱动版本有哪些,如下代码所示: QStringList drivers = QSqlDatabase::d ...

  4. axios全局拦截响应

    在系统开发过程中,若遇到长时间未操作,则需要将页面跳转到登录页面.因为现在都是前后端分离的开发模式,路由跳转都交给前端,而后端只返回一个报错信息,例如"errorMsg":&quo ...

  5. Python分布式爬虫必学框架scrapy打造搜索引擎✍✍✍

    Python分布式爬虫必学框架scrapy打造搜索引擎  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身 ...

  6. 知识图谱+Recorder︱中文知识图谱API与工具、科研机构与算法框架

    目录 分为两个部分,笔者看到的知识图谱在商业领域的应用,外加看到的一些算法框架与研究机构. 文章目录 @ 一.知识图谱商业应用 01 唯品金融大数据 02 PlantData知识图谱数据智能平台 03 ...

  7. linux格式化磁盘

    linux格式化磁盘 查看系统磁盘情况 [root@db02 ~]# fdisk -l #查看当前系统上所有存储设备(包括挂在和没挂载的)  注:如果没有管理员权限是看不见磁盘的,因为fdisk默认读 ...

  8. iOS进阶二-KVC

    概述 KVC的全程是Key-Value Coding, 俗称"键值编码",可以通过一个key来访问属性 常见的AP有 - (void)setValue:(nullable id)v ...

  9. Android开发 retrofit入门讲解 (RxJava模式)

    前言 retrofit除了正常使用以外,还支持RxJava的模式来使用,此篇博客讲解如何使用RxJava模式下的retrofit 依赖 implementation 'com.squareup.ret ...

  10. 微信公众号支付出现:“当前页面的URL未注册”

    微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示.解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调U ...