进击の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. Zookeeper分布式过程协同技术 - 概念及基础

    Zookeeper分布式过程协同技术 - 概念及基础 Zookeeper是什么? Zookeeper是一种分布式过程协同技术,其所提供的客户端API功能强大,其中包括: 保障强一致性.有序性和持久性. ...

  2. ceph对象存储RADOSGW安装与使用

    本文章ceph版本为luminous,操作系统为centos7.7,ceph安装部署方法可以参考本人其他文章. [root@ceph1 ceph-install]# ceph -v ceph vers ...

  3. Maven中央仓库正式成为Oracle官方JDBC驱动程序组件分发中心

    1. 前言 相信参与使用Oracle数据库进行项目开发.运维的同学常常被Oracle JDBC驱动的Maven依赖折磨.现在这一情况在今年二月份得到了改变,甲骨文这个老顽固终于开窍了. 一位甲骨文的工 ...

  4. Java String的相关性质分析

    引言 String可以说是在Java开发中必不可缺的一种类,String容易忽略的细节也很多,对String的了解程度也反映了一个Java程序员的基本功.下面就由一个面试题来引出对String的剖析. ...

  5. web前端开发入门全套学习方法路径，兼职在家做网站也能月入上万！

    前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...

  6. 小程序拾色器（颜色选择器）组件mini-color-picker

    特性: 现有方案分析 we-color-picker 需注意组件定位,操作不跟手不流畅,配置复杂.其定位会撑开原有页面,体验不佳.滑动距离按像素区分(固定),需考虑设备分辨率,不利于多端. Papae ...

  7. 从零创建发布属于自己的composer包

    原文地址:https://www.wjcms.net/archives/从零创建发布属于自己的composer包 今天给大家讲解一下如何从零创建发布属于自己的composer包. composer包用 ...

  8. keepalived 热备

    概述 keepalived高可用集群      keepalived最初是为了LVS的,因为LVS无法进行自动检测服务器的节点状态(可以自动部署LVS)     keeplived后来加入VRRP给功 ...

  9. Let's GO(四）

    人生苦短,Let's GO Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 今天我学了什么? 1.panic && recover Go ...

  10. DVWA学习记录 PartⅦ

    SQL Injection 1. 题目 SQL Injection,即SQL注入,是指攻击者通过注入恶意的SQL命令,破坏SQL查询语句的结构,从而达到执行恶意SQL语句的目的. 2. Low a. ...