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选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
随机推荐
- 调试 ASP 程序脚本
调试 ASP 脚本 无论您的计划多么精密.经验多么丰富,脚本错误 (bug) 可能在最初就使您的 ASP 服务器端的脚本无法正确运行.也就是说调试,即查找和纠正脚本错误,对开发一个成功的和强健的 AS ...
- 洛谷【P3952】NOIP2017提高组Day1T2时间复杂度
我对模拟的理解:http://www.cnblogs.com/AKMer/p/9064018.html 题目传送门:https://www.luogu.org/problemnew/show/P395 ...
- Poj 1973 Software Company(二分+并行DP)
题意:软件公司接了两个项目,来自同一个合同,要一起交付.该公司有n个程序猿来做这两个项目A和B,每个项目都被分为m个子项目,给定每个程序猿做一个A中的子项目需要的时间Xi秒,和做B中的子项目所需时间Y ...
- JUST第二界算法设计大赛题解
1.问题描述: 悠悠假期同叔叔一起去书店,他选中了六本书,每本书的单价(单位:元)分别为:3.1,1.7,2,5.3,0.9 和7.2.不巧的是,叔叔只带了十几块钱,为了让悠悠高兴,叔叔同意买书,但提 ...
- 【转】 Pro Android学习笔记（三二）：Menu（3）：Context菜单
目录(?)[-] 什么是Context menu 注册View带有Context menu 填Context菜单内容 Context菜单点击触发 什么是Context menu 在桌面电脑,我们都很熟 ...
- ES6学习之函数扩展
函数默认参数 function test(x = 1, y = 2) { return x + y } test(5, 6) test() 若默认参数在必须参数之前,要想取得默认参数,只有当传入的值为 ...
- C++ 替换字符串内某个字符或子串
1. 问题描述 string s="abc"; string tmp="1"; 2.解决方案 // tmp 必须为字符串 // 第一个 1 表示 s 中的位置 ...
- ObservableCollection和List的区别总结
一.继承的类和接口,还有它们的方法不同 1)ObservableCollection比较简单,继承了Collection, INotifyCollectionChanged, INotifyPrope ...
- 问题：OAuth2.0；结果：帮你深入理解OAuth2.0协议
1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题. 豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒 ...
- 关于 sklearn.decomposition.KernelPCA的简单介绍
from sklearn import decomposition import numpy as np A1_mean = [1, 1] A1_cov = [[2, .99], [1, 1]] A1 ...