进击のpython

*****

前端学习——CSS选择器

每一条CSS样式声明由两部分组成：

选择器{

	样式；

}

在CSS中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象

也就是说该”样式“作用与网页中的哪些元素

那选择器就分为：基础选择器和高级选择器

基础选择器

标签选择器

标签选择器顾名思义就是html代码中的标签

我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性

它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性

举个栗子：为页面中所有的段落设置字号为12px,字体颜色为红色，字体粗细为更粗

p{

    color:red;

    font-size:12px;

    font-weight:bold;

}

ID选择器

ID好比是每个人的身份证号一样，每个人都有身份证，而且身份证号都是不一样的

那么在网页中所有的标签都可以设置ID，并且ID不能重复

#ID选择器名称{

    css样式代码;

}

注意：

1、以#开头

2、其中ID选择器名称可以任意起名(最好不要起中文)

3、ID的名称必须是唯一的

4、不能用数字开头

ID选择器选中的是页面中元素特有的属性

我想把，我，你都变成紫色，很明显仅靠标签选择器就不行了

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        span {

            color: red;

        }

        #span1, #span2 {

            color: purple;

        }

    </style>

</head>

<body>

<p>

    <span>百因必有果！</span><span id="span1">你</span>的报应就是<span id="span2">我</span>!

</p>

</body>

</html>

类选择器

类选择器跟id有点相似，任何的标签元素都可以添加类(class)

但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开

比如狗、猫、刺猬属于动物类，黑白打印机和彩色打印机属于打印机类

同样情况下，比如网页中的某几个标签，像p、li、a标签同属于active类

那么我们就可以这边表示<p class='active'></p>，语法如下：

.类选择器名称{css样式代码;}

注意：

1、英文圆点开头

2、其中类选择器名称可以任意起名(最好不要起中文)

3、不能用数字开头

既然类可以重复添加，并且同一个标签可以添加多个类

那么我们在使用类选择器的使用一定要有公共类的概念

举个例子：

比如有三个同样的文本内容

<p>同仁堂</p>

<p>同仁堂</p>

<p>同仁堂</p>

现在有个需求，要求第一个同仁堂文本颜色是绿色并且字体大小是20px

第二个同仁堂的文本颜色也是绿并且文本粗细更粗

第三个同仁堂文本颜色是默认黑色且文本粗细更粗并且字体大小也为20px

如果用我们的id选择器来书写的话，我们看一下代码。代码如下：

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style>

      #p1{

        color:green;

        font-size:20px;

      }

      #p2{

        color:green;

        font-weight:bold;

      }

      #p3{

        font-weight:bold;

        font-size:20px;

      }

    </style>

  </head>

  <body>

    <p id='p1'>同仁堂</p>

    <p id='p2'>同仁堂</p>

    <p id='p3'>同仁堂</p>

  </body>

</html>

如果我们有公共类的概念，我们会通过需求发现：

p1和p2有公共属性字体颜色为绿色，

p1和p3有公共属性字体大小为20px，

p2和p3有公共属性字体粗细为更粗

那么我们可以给每个p标签设置相应的类，代码如下：

<p class="lv big">同仁堂</p>

<p class="lv bold">同仁堂</p>

<p class="big bold">同仁堂</p>

CSS代码：

<style>

    .lv{

        color:green;

    }

    .big{

        font-size:20px

    }

    .bold{

        font-weight:bold;

    }

</style>

那么，会发现明显更有效的使用类，能有效的减少一些冗余性的代码

高级选择器

后代选择器

顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)

div p{

    css代码样式;

}

使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素

之前咱们讲解div标签的时候，说到div是一个容器，它可以装任何内容

这样我们能联想到我们的html结构应该是这样的：

<div>

    <p>Penglin</p>

</div>

刚刚咱们又学习完了基本的选择器，我们也可以给div命名

比如<div class="container"></div>，那么css的编写如下代码：

.container p{

    color:red;

}

也就是container类下的所有p标签都是红色的

子代选择器

子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器

div>p{css代码样式;}

拿到这里就要提一下后代选择器和子代选择器的分别用途了

有一个三级菜单，分别对二级菜单的列表的内容文本设置为绿色

<div class="menu">

    <ul class="food">

      <li>

        水果

        <ul>

          <li>香蕉

            <ul>

              <li>仙人蕉</li>

              <li>西贡蕉</li>

              <li>畦头大蕉</li>

            </ul>

          </li>

          <li>苹果

            <ul>

              <li>红蛇果</li>

              <li>烟台苹果</li>

            </ul>

          </li>

        </ul>

      </li>

      <li>

        蔬菜

        <ul>

          <li>白菜

            <ul>

              <li>北京青白</li>

              <li>山东胶州大白菜</li>

              <li>东北大矮白菜</li>

            </ul>

          </li>

          <li>黄瓜

            <ul>

              <li>春花瓜</li>

              <li>架黄瓜</li>

              <li>北京刺瓜</li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

  </div>

如果使用后代选择器，或许有的同学可以这样写，为了省事

直接ul li{color:green;}那么，我们会发现所有的列表都变成了绿色

不满足需求，因为ul的后代元素li,既选中了一级菜单的列表

又选中了二级菜单的列表,也选中了三级菜单

如果我们使用子代选择器，我们可以这里编写css代码，css代码如下

.food>li>ul>li{

    color:red;

}

会发现，三级菜单也变成了红色，这个是由于css的属性继承性导致的，后面咱们会讲解

通用选择器

通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素

使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页

对页面中所有的文本设置为红色：

*{color:red;}

组合选择器

当你想在html中为多个标签元素设置同一个样式时

我们可能会想到添加相同的类，但是如果网页中的这样的标签非常多呢？

是不是添加相同的类名，又成了我们累加的工作，不易于效率开发

那么我们可以使用组合选择器来选择，语法如下：

比如对网页中的h1，span,p标签的字体设置为color:gray;font-size:14px;

h1,span,p{

    color:red;

    font-size:14px;

}

对比一下

标签选择器：

h1{

    color:red;

    font-size:14px;

}

span{

    color:red;

    font-size:14px;

}

p{

    color:red;

    font-size:14px;

}

类选择器：

.active{

    color:red;

    font-size:14px;

}

<h1 class='active'></h1>

<span class='active'></span>

<p class='active'></p>

伪类选择器

更有趣的是伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

a:hover{

    color:red;

}


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>伪类选择器的使用</title>

  <style type="text/css">

  a:hover{

    color:red;

  }

  </style>

</head>

<body>

  <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

另外a标签不仅仅是应用在hover，鼠标悬浮上，它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“

/*没有被访问过a标签的样式*/

a:link {

    color: green;

}

/*访问过后a标签的样式*/

a:visited {

    color: yellow;

}

/*鼠标悬浮时a标签的样式*/

a:hover {

    color: red;

}

/*鼠标摁住的时候a标签的样式*/

a:active {

    color: blue;

}

注意：在页面中使用a的时候，一定按照顺序Link->visited->hover>active

对于hover来说，不仅仅可以应用在a上，也可以应用在其他标签，比如div,p,li等等

*****
*****

前端学习（十）：CSS选择器的更多相关文章

  1. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  2. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  3. 学习《CSS选择器Level-4》不完全版

    1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...

  4. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  5. 前端学习之CSS

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

  6. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

  7. HTML 学习笔记 CSS(选择器)

    CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...

  8. 前端学习之--CSS

    CSS 常用帮助文档 CSS:被用来同时控制多重网页的样式和布局.HTML页面中CSS样式的写法有3种: 1:标签中写入 <body style='margin o auto;'> 2:h ...

  9. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  10. 前端学习笔记--CSS入门

    1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...

随机推荐

  1. 入门大数据---Kafka的搭建与应用

    前言 上一章介绍了Kafka是什么,这章就讲讲怎么搭建以及如何使用. 快速开始 Step 1:Download the code Download the 2.4.1 release and un-t ...

  2. TCP协议粘包问题详解

    TCP协议粘包问题详解 前言 在本章节中,我们将探讨TCP协议基于流式传输的最大一个问题,即粘包问题.本章主要介绍TCP粘包的原理与其三种解决粘包的方案.并且还会介绍为什么UDP协议不会产生粘包. 基 ...

  3. ubuntu18.04安装nodejs最新版、指定版 12.x 14.x

    今天准备在 ubuntu 服务器里面安装 nodejs 版本,ubuntu 18.04 仓库 nodejs 默认是 8.x 版本. 1. 通过 apt 安装 nodejs 在 Ubuntu 18.04 ...

  4. NodeMCU手把手入门：配置NodeMCU ESP8266开发板环境及点亮LED灯

    之前一直在玩树莓派,最近实验室买了些NodeMCU就想着玩一玩,没想到挺有意思的.其实树莓派能实现的功能,它大部分也可以,价格比派也便宜不少,舍不得买派的同学可以先买这个开发板玩一玩. 本文主要介绍了 ...

  5. 只需几行 JavaScript 代码，网页瞬间有气质了！

    最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation.干嘛用的呢?就是在网页上给文字加标注,比如下划线.方框.高亮文字背景等,不过是手写风格的!截图给大家感受下 ...

  6. 《算法笔记》6.6小节 问题 A: 任务调度

    这道题我一开始看到的时候,想到的是拓补排序,可是这么菜又这么懒的我怎么可能用呢,既然出现在优先队列里面,那么久一定和他有关了 可是并没有使用优先队列 思路: 对于这道题,我们肯定是对他们定义优先级,然 ...

  7. 「疫期集训day8」 雪原

    可恶的红军,他们嘴上说着以人民为中心,被地里烧杀强掠同族人----为我们祝福吧,伟大的母亲河,为了沙皇------窝瓦河(伏尔加河)中坚守的俄罗斯白军 又是考爆的一天,然俄前两题都该A的.T1签到题一 ...

  8. HDU 3911 Black and White (线段树，区间翻转)

      [题目地址] vjudge HDU [题目大意] 海滩上有一堆石头. 石头的颜色是白色或黑色. 小肥羊拥有魔术刷,她可以改变连续石的颜色,从黑变白,从白变黑. 小肥羊非常喜欢黑色,因此她想知道范围 ...

  9. Creator填色游戏的一种实现方案

    前言 先上一个辛苦弄出来的gif效果.写公众号时间不长,很多技巧还在慢慢跟小伙伴学习.可关注公众号,回复"绘图"或者"填色"都可获得demo的git地址.请使用 ...

  10. 配置类需要标注@Configuration却不知原因？那这次就不能给你涨薪喽

    专注Java领域分享.成长,拒绝浅尝辄止.关注公众号[BAT的乌托邦]开启专栏式学习,拒绝浅尝辄止.本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈.My ...