基本选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，

某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为

它们设置样式了。 选择器为样式规则指定一个作用范围。

基础选择器包括：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

标签选择器

ID选择器

类选择器

通用选择器

总结：

<!--

        css的选择器：1.基本选择器  2.高级选择器

        1.标签选择器

            标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等

            不管标签藏的多深，都能选中

            选中的是所有的，而不是某一个，所以说 "共性"  而不是 ”特性“

        2.id选择器

            # 选中id

            同一个页面中id不能重复。

            任何的标签都可以设置id

            id命名规范 要以字母 可以有数字 下划线 -  大小写严格区分  aa和AA

        3.类选择器

        1.所谓类 就是class  . class与id非常相似 任何的标签都可以加类

        但是类是可以重复    归类

        2.同一个标签中可以携带多个类 用空格隔开

        类的使用 能够决定前端工程师的css水平到底有多牛逼？

        一定要有”公共类“的概念

        总结：

        1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

        2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

        玩好了类 就等于玩好了css中的1/2

        到底使用id还是用class？

        答案：尽可能的用class。除非一些特殊情况可以用id

        原因：id一般是用在js的。也就是说  js是通过id来获取到标签

     -->

小练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小练习myself</title>

        <style type="text/css">

        /*.lv{*/

            /*color: #4cae4c;font-size: 20px;*/

        /*}*/

        /*.lv2{*/

            /*color: #2aabd2;*/

        /*}*/

        /*.lv3{*/

            /*color: #c7254e;*/

            /*text-decoration: underline;*/

        /*}*/

            /*设置公共的 下面直接调用*/

        .big{

            color: #4cae4c;font-size: 20px;

        }

        .lv{

            color: #2aabd2;

        }

        .line{

            text-decoration: underline;

        }

        </style>

</head>

<body>

    <div>

        <!--<p class="lv">The best revenge is massive success. </p>-->

        <!--<p class="lv2">The best revenge is massive success. </p>-->

        <!--<p class="lv3">The best revenge is massive success. </p>-->

        <!--直接调用上面公共的定义的class接口-->

        <!--2.同一个标签中可以携带多个类 用空格隔开-->

        <p class="lv big">The best revenge is massive success. </p>

        <p class="lv">The best revenge is massive success. </p>

        <p class="lv big line">The best revenge is massive success. </p>

    </div>

    <div></div>

    <div></div>

</body>

</html>

前端-CSS-2-选择器的更多相关文章

  1. 前端 CSS的选择器 基本选择器

    基本选择器包括: 标签选择器 类选择器 ID选择器 通用选择器 标签选择器 就是通过标签名来选择元素: 选中p标签 <!DOCTYPE html> <html lang=" ...

  2. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  3. 前端 CSS的选择器 属性选择器

    属性选择器,字面意思就是根据标签中的属性,选中当前的标签. 属性选择器 通常在表单控件中 使用比较多 根据属性查找 /*用于选取带有指定属性的元素.*/ <!DOCTYPE html> & ...

  4. 前端 CSS的选择器 伪类选择器

    伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...

  5. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  6. 前端 CSS的选择器 基本选择器 类选择器

    类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...

  7. 前端 CSS的选择器

    什么是选择器.在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了. 选 ...

  8. 前端 CSS的选择器 伪类选择器 CSS3 nth-child()

    first-child 选中第一个标签 应用CSS样式 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  10. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

随机推荐

  1. stenciljs 学习五 事件

    组件可以使用Event Emitter装饰器发送数据和事件. Event 定义 参考: import { Event, EventEmitter } from '@stencil/core'; ... ...

  2. centos7 添加用户并授权root权限

    centos7.2 版本,我们不可能每次都用root账号登陆,root账号公认的不安全,所以,首先,禁止掉root账号的登陆.1.静止root账号登陆. $ vi /etc/ssh/sshd.conf ...

  3. vuex、redux、mobx 对比

    出处:https://www.w3cplus.com/javascript/talk-about-front-end-state-management.html 其实大部分概念都差不多,只不过VUEX ...

  4. JVM 之：Class 类文件结构

    类文件结构 Class 文件是一组以8位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在 Class 文件中,中间没有添加任何分隔符,这使得整个 Class 文件中存储的内容几乎全部都是 ...

  5. maven 指定 jdk 版本

    方法1:直接修改 本地  settings.xml 文件 <profiles>  </profiles> 之间加入 下面的 <profile> <id> ...

  6. valgrind的使用--检测内存

    valgrind主要检测内存的使用情况,检测有否内存泄露等. 比如:test_va2.cpp #include<iostream> using namespace std; int mai ...

  7. css display table使用小例子实验

    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...

  8. 团队作业（二）：ASB

    团队作业(二):团队选题 题目四:基于Android的文件加密系统 系统名称:ASB 一.引言 1.1编写目的 (1)学习并熟悉掌握AES/DES加密算法的原理以及算法 (2)学习并熟悉Android ...

  9. 设置UMG的ComboBox(String)字体大小

    转自:http://aigo.iteye.com/blog/2295448 UMG自带ComboBox组件没有提供直接的属性来修改其字体大小,只能自己做一个列表类型的widget然后再塞进ComboB ...

  10. Oracle 同一个字段的两值进行加减计算

    如 病人ID      入院日期                出院日期 00001      2016-09-01          2016-09-10 00001      2016-09-15 ...