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. Java:关于main方法的10道面试题

    感觉假期过得好快,东西也丢得快. 假期吃喝玩乐之余也来温故一下Java知识,下面给大家整理了10道Java main方法的经典面试题,都来挑战一下自己的Java基础知识吧! 1.main方法是做什么用 ...

  2. parallels desktop虚拟机与Mac共享网络设置方法

    查看vnic0的ip centos7设置ip parallels desktop偏好设置 最后可以互ping 也可以ping外网

  3. RHEL7中网卡绑定team和bond的区别

    red hat 官方给出的team和bond特性对比 A Comparison of Features in Bonding and Team Feature Bonding Team broadca ...

  4. neo4j数据库迁移---------Neo4j数据库导入导出的方法

    Neo4j数据进行备份.还原.迁移的操作时,首先要关闭neo4j; /usr/share/neo4j/bin neo4j stop 如果出现 Neo4j not running 出现这种情况, Neo ...

  5. BeanShell Sampler生成uuid

  6. 回车切换input选框

    在工作中许多时候需要考虑到用户体验,当按下回车键时切换input选框就来得十分必要. <!DOCTYPE HTML> <html> <head> <meta ...

  7. 笔记:Python防止SQL注入

    非安全的方式,使用动态拼接SQL 输入' or 1 = 1 or '1 sql ="""SELECT * FROM goods WHERE name = '%s';&qu ...

  8. jQuery ajax - post() 方法

    实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("i ...

  9. 請問各位大大,我要將listview顯示的縮圖加入到listview2,請問該如何做呢

    請問各位大大,我要將listview顯示的縮圖加入到listview2,請問該如何做呢?下面的function可以將listview的縮圖加到listview2但是全都顯示listview1第一張的圖 ...

  10. 11 Python Libraries You Might Not Know

    11 Python Libraries You Might Not Know by Greg | January 20, 2015 There are tons of Python packages ...