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选择符分类 首先来看 ...
随机推荐
- Java:关于main方法的10道面试题
感觉假期过得好快,东西也丢得快. 假期吃喝玩乐之余也来温故一下Java知识,下面给大家整理了10道Java main方法的经典面试题,都来挑战一下自己的Java基础知识吧! 1.main方法是做什么用 ...
- parallels desktop虚拟机与Mac共享网络设置方法
查看vnic0的ip centos7设置ip parallels desktop偏好设置 最后可以互ping 也可以ping外网
- RHEL7中网卡绑定team和bond的区别
red hat 官方给出的team和bond特性对比 A Comparison of Features in Bonding and Team Feature Bonding Team broadca ...
- neo4j数据库迁移---------Neo4j数据库导入导出的方法
Neo4j数据进行备份.还原.迁移的操作时,首先要关闭neo4j; /usr/share/neo4j/bin neo4j stop 如果出现 Neo4j not running 出现这种情况, Neo ...
- BeanShell Sampler生成uuid
- 回车切换input选框
在工作中许多时候需要考虑到用户体验,当按下回车键时切换input选框就来得十分必要. <!DOCTYPE HTML> <html> <head> <meta ...
- 笔记:Python防止SQL注入
非安全的方式,使用动态拼接SQL 输入' or 1 = 1 or '1 sql ="""SELECT * FROM goods WHERE name = '%s';&qu ...
- jQuery ajax - post() 方法
实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("i ...
- 請問各位大大,我要將listview顯示的縮圖加入到listview2,請問該如何做呢
請問各位大大,我要將listview顯示的縮圖加入到listview2,請問該如何做呢?下面的function可以將listview的縮圖加到listview2但是全都顯示listview1第一張的圖 ...
- 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 ...