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选择器的更多相关文章

  1. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  2. 02.CSS选择器-->:focus

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css笔记02：选择器（标签式和类）

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  4. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  5. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  6. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  7. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Spider-Scrapy css选择器提取数据

    首先我们来说说css选择器:其实在上面的概述:和scrapy相关的函数就这么三个而已:response.css("css表达式").extract().extract_first( ...

  10. CSS选择器大全48式

    00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...

随机推荐

  1. GCC生成动态库

    main.c #include <stdio.h> void hello(void); int main(int argc, char ** argv) { printf("Th ...

  2. 洛谷【P1480】A/B Problem

    题目传送门:https://www.luogu.org/problemnew/show/P1480 高精除低精板子题,灵性地回忆一下小学时期列竖式的草稿纸即可. 时间复杂度:\(O(len)\) 空间 ...

  3. bzoj 3730 震波 —— 动态点分治+树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3730 建点分树,每个点记两个树状数组,存它作为重心管辖的范围内,所有点到它的距离情况和到它在 ...

  4. HDOJ5044(最近公共祖先)

    #include<cstdio> #include<cstring> using namespace std; ; struct Edge{ int v,id,next; }e ...

  5. css3 tranform perspective属性

    perspective 属性用于规定观察点距离元素的距离, 1 观察点距离元素越近,元素变形就越大,灭点距离越近. 2 观察点距离元素越远,元素变形越小,灭点距离也就越远. 比如设置perspecti ...

  6. svn、git等比较---总结

    免费的版本控制系统: CVS:集中式的版本控制系统,必须联网,速度慢,CVS作为最早的开源而且免费的集中式版本控制系统,直到现在还有不少人在用.由于CVS自身设计的问题,会造成提交文件不完整,版本库莫 ...

  7. linux命令-xz压缩

    xz gzip bzip2使用方法基本一样 压缩文件 [root@wangshaojun ~]# xz 111.txt[root@wangshaojun ~]# ls  //////111.txt文件 ...

  8. vue.js 使用高德地图

    1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件  webpack.base.conf.js externa ...

  9. angularJS中自定义指令

    学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. ...

  10. KickStart安装CentOS，同时安装和配置hadoop

    声明:这篇文章是前面是拾人牙慧,我是结合 http://www.111cn.net/sys/linux/59969.htm 和 http://www.cnblogs.com/mchina/p/cent ...