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选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
随机推荐
- 数据schemaAvro简介
文章结束给大家来个程序员笑话:[M] 最近在研究Thrift和Avro以及它们的区分,通过各种渠道搜集资料,现整顿出有关Avro的一些资料,方便当前参考. 一.弁言 1. 简介 Avro是Hadoop ...
- bzoj 3996 线性代数 —— 最大权闭合子图
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3996 把题中的式子拆开看看,发现就是如下关系: 如果 a[i] == 1 && ...
- Java常见设计模式之责任链模式
原文地址: http://www.cnblogs.com/java-my-life/archive/2012/05/28/2516865.html 在阎宏博士的<JAVA与模式>一书中开 ...
- lua 函数调用 -- 闭包详解和C调用
转自:http://www.cnblogs.com/ringofthec/archive/2010/11/05/luaClosure.html 这里, 简单的记录一下lua中闭包的知识和C闭包调用 前 ...
- TS学习之泛型
可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { return args; } functi ...
- shell判断网络主机存活
判断网络主机存活企业面试题4:写一个脚本,实现判断10.0.0.0/24网络里,当前在线用户的IP有哪些(方法有很多) #!/bin/sh#[ -f /etc/init.d/functions ] & ...
- C++中指向对象的常指针和指向常对象的指针
指向对象的常指针 将指向对象的指针变量声明为const型,并使之初始化,这样指针值始终保持为其初始值,不能改变. Time t1(10,12,15),t2; Time * const ptr1=&am ...
- SSM框架集成Redis
SSM-Spring+SpringMVC+Mybatis框架相信大家都很熟悉了,但是有的时候需要频繁访问数据库中不变或者不经常改变的数据,就会加重数据库的负担,这时我们就会想起Redis Redis是 ...
- Ajax 执行流程 有用 一点
l 1.1使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象) l 1.2 通过AJAX引擎确定请求路径和请求参数 l 1.3 通知AJAX引擎发送请求 l AJA ...
- 【PHP】Composer使用简介，composer install 和 update 区别
1.composer是php的依赖包管理工具 2.符合PSR-0/1/2/3/4 规范 3.composer安装推荐使用国内镜像 4.composer require/install/update 区 ...