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选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
随机推荐
- Impala的JDBC无法连接
这是因为客户端连接的JDBC是Impala的master机器,而不是DataNode:因为JDBC的服务宿主是Impalad,而Impalad只是部署在DataNode
- cmdb1--介绍
背景:现在运维管理服务器多数使用Excel表来维护,而且是多人来维护,造成信息不统一,所以要将信息入库,并方便后续的批量操作 1.cmdb主要分3块: a.采集信息程序 b.API提供接口 c.后台管 ...
- C#自定义控件 绘制框
上几张测试的 效果 虽然全是用.net 的绘图库画的,但是手动双缓冲,不会闪烁,感觉还不错,源码开放了,喜欢的拿去扩展吧; 用于撤销的存放图像的数据结构我设置为10个,怕是内存崩了,我看mspaint ...
- python 基础 列表 小例子
存主机ip到列表 host_list=[] netip='192.168.1' for hostip in range(1,254): ip = netip +str(hostip) host_lis ...
- javaScript之this的五种情况
this一直是JavaScript研究的难题,特别是在笔试和面试中的各种程序分析问题中,也常常会被问到.下面来看一看this被运用的五中情况: (1) 纯粹的函数调用 函数最普通用法,此时 ...
- CSS是什么？W3C是什么？W3C盒子与IE盒子的区别？
(1)层叠样式(Cascading Style Sheets, CSS)是用来表现HTML或XML文本样式的语言. (2)W3C推荐规范(World Wide Web Consortium,W3C ...
- Centos6.5安装JDK8教程(一)
[原] 转载请注明原文地址, 保持对知识基本尊重,谢谢! Win7宿主系统 VmWareWorkstation 11应用下的 Centos6.5系统. /******************* ...
- iconv字符转换
iconv是linux下的编码转换的工具,它提供命令行的使用和函数接口支持 函数接口 iconv函数族的头文件是iconv.h,使用前需包含之.#include <iconv.h> ico ...
- Flask14 渲染问题、API、项目文档
3 前端渲染和后端渲染 这两种渲染都属于动态页面 区分前后端渲染的关键点是站在浏览器的角度 3.1 后端渲染 浏览器请求服务器后获取到的是完整的HTML页面(即:后台已经组装好HTML文件啦),利用f ...
- datanode与namenode的通信原理
在分析DataNode时, 因为DataNode上保存的是数据块, 因此DataNode主要是对数据块进行操作. **A. DataNode的主要工作流程:** 1. 客户端和DataNode的通信: ...