02------css选择器
css的选择器：1.基本选择器 2.高级选择器
基本选择器包含：
1、标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“。
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
2、id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值。
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> <style type="text/css" media="screen">
/*权重 id class 标签 个数*/
#box{
color: green; /*权重1*/
} .child{
color:red; /*#权重2*/
} p{
color:blue; /*权重3*/
} </style> </head> <body>
<div id="box">
<div>
<div class="child">
<p>猜猜我是什么颜色</p>
</div>
</div>
</div>
<p>段落</p> </body>
</html>
例子
3.类选择器
3.1 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。
3.2 同一个标签中可以携带多个类，用空格隔开
类的使用，能够决定前端工程师的css水平到底有多牛逼？
答案：一定要有”公共类“的概念
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
总结：
- 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/2
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签
02------css选择器的更多相关文章
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- 02.CSS选择器-->:focus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css笔记02：选择器（标签式和类）
body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- [css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Spider-Scrapy css选择器提取数据
首先我们来说说css选择器:其实在上面的概述:和scrapy相关的函数就这么三个而已:response.css("css表达式").extract().extract_first( ...
- CSS选择器大全48式
00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
随机推荐
- [转]关于新一轮QQ Tencent://Message 在线联系
关于在线QQ代码. 以前的QQ代码都需要添加好友. 现在的 首先是到http://wp.qq.com/生成你的QQ在线代码 很长的一段代码,并且每个QQ生成的sigT字符串都是不一样的.. 闲来无事, ...
- Parallel Programming-Task Base
Parallel.For/ForEach是数据层面的并行,本文所讲的Task是将不同的操作并行执行,本文主要内容: Task的工作模型 初始化Task 完成Task 取消Task 一.Task工作模型 ...
- Excel特殊格式的列
1.根据前两列显示天时分格式,算出所需时间列的内容=DAY(O2-N2)&"天"&HOUR(O2-N2)&"小时"&MINUTE ...
- 【转】 Pro Android学习笔记（四七）：Dialog（4）：一些补充和思考
目录(?)[-] 编程思想封装接口 fragment和activity以其他fragment之间的通信 编程思想:封装接口 在小例子中,fragment会调用activity的onDialogDone ...
- spring初始化顺序
首先,Spring bean的默认加载顺序是怎么控制的 工程中有2个bean,A和B,其中必须先初始化A再初始化B,但是没有depend-on或者Order等方式去保证,只不过恰好刚好这么运行着没出事 ...
- 【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
- shell入门-特殊符号
特殊符号:* 说明:通配符,多个字符.所有后缀为”.txt“的文件列出来 [root@wangshaojun 111]# ls *.txt11.txt 1.txt 22.txt 2.txt 33.tx ...
- robot framework结合Jenkins（一）
一.CI与Jenkins介绍: 1.持续集成(CI) 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化 ...
- 9、linux的特殊符
在shell中常用的特殊符号罗列如下: # ; ;; . , / \ 'string'| ! $ ${} $? ...
- java之Scanner
参考http://how2j.cn/k/operator/operator-scanner/658.html#nowhere 需要用到从控制台输入数据,所以需要用到Scanner类 使用Scanner ...