标签选择器

　　1、选择要给样式的目标标签，所以叫做标签选择器，也叫元素选择器。

2、给所有相同标签，给相同样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

    /*标签选择器：标签作为选择器*/

        p{

            color: red;

        }

        div{

            color: purple;

        }

    </style>

</head>

<body>

    <p>李大嘴</p>

    <p>佟掌柜</p>

    <p>白展堂</p>

    <div>鸣人</div>

    <div>佐助</div>

</body>

</html>

类选择器

1、html声明，CSS调用

2、格式：   .类名{属性:值;属性:值}

3、类名尽量不使用下划线（用中横线代替），纯数字，中文，具体见命名规范。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

    /*标签选择器：标签作为选择器*/

        p{

            color: red;

        }

        div{

            color: purple;

        }

    /*类选择器:html声明，CSS调用*/

        .mingren{

            color: orange;

            font-weight: bold;

            font-family: "微软雅黑"

        }

        .zuozhu{

            color: blue;

        }

    </style>

</head>

<body>

    <p>李大嘴</p>

    <p>佟掌柜</p>

    <p>白展堂</p>

    <!-- 声明类 -->

    <div class="mingren">鸣人</div>

    <div class="zuozhu">佐助</div>

</body>

</html>

多类名选择器

1、混合搭配，比较自由

2、多个类名用空格隔开，与顺序无关

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

        .font20{

            font-size: 20px；

        }

        .font14{

            font-size:14;

        }

        .pink{

            color: pink;

        }

    </style>

</head>

<body>

    <div class="font20 pink">亚瑟</div>

    <div class="font20">项羽</div>

    <div class="font14 pink">刘备</div>

    <div class="font14">安琪拉</div>

</body>

</html>

id选择器

1、id名即为html元素的id属性值，大多数html元素都具体定义id属性，元素的id值是唯一的，只能对应文档中的某一个具体元素

2、类选择器时可以多次重复使用，类似人名。W3C规定，id选择器只能使用一次，相当于身份证号。区别就是在使用次数上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

        #pink{

            color: pink;

        }

    </style>

</head>

<body>

    <div id="pink">亚瑟</div>

    <div >项羽</div>

    <div >刘备</div>

    <div >安琪拉</div>

</body>

</html>

通配符选择器

*代表所有选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

        *{

            color: pink;

        }

    </style>

</head>

<body>

    <div>亚瑟</div>

    <p >刘备</p>

    <h1>我是段落</h1>

</body>

</html>

伪类选择器

用于向某些选择器添加特殊效果，如给链接添加效果，比如可以选择 第一个，第n个选择器。

链接伪类选择器

1、a:link       /*未访问的链接*/

2、a:visited   /*已访问的链接*/

3、a:hover    /*鼠标移入的链接*/

3、a:activea:  /*鼠标按住的链接*/

顺序尽量不要颠倒，按照lvha（love  hate记忆法）的顺序。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS注释</title>

    <style type="text/css">

        a:link {

            color: blue;

        }

        a:visited {

            color: gray;

        }

        a:hover{

            color: green;

        }

        a:active{

            color: red;        }

    </style>

</head>

<body>

    <div><a href="#">秒杀</a></div>

</body>

</html>

简写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        a{

            font-weight: 700;

            font-size: 16px;

            color: gray;

        }

        a:hover{

            color: red;

        }

    </style>

</head>

<body>

    <a href="#">秒杀</a>

</body>

</html>

结构（位置）伪类选择器（CSS3）

:first-child：选择父类选择器的第一个子类

:last-child：选择父类选择器的最后一个子类

:nth-child(4)：选择父类选择器的最后4个子类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        li:first-child{

            color:red;

        }

        li:last-child{

            color: blue;

        }

        li:nth-child(4){

            color: green;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</body>

</html>

:nth-child(even)：选择所有偶数子类

:nth-child(odd)：选择所有奇数子类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        li:nth-child(even){

            color:red;

        }

        li:nth-child(odd){

            color:green;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</body>

</html>

可以用公式：n是从0开始的

:nth-child(n)：选择所有子类

:nth-child(2n)：选择所有偶数子类

:nth-child(2n+1)：选择所有奇数子类

:nth-child(3n)：选择第3的倍数个子类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        li:nth-child(3n){

            color:red;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</body>

</html>

:nth-last-child(2)：选择倒数第2个子类

后面的公式和even、odd用法和:nth-child一样，不过是把最后一个当第一个子类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        li:nth-last-child(2){

            color:red;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</body>

</html>

目标伪类选择器

:target：当前选中的元素，配合锚点使用

    <style type="text/css">

        :target{

            color: red;

        }

    </style>

文本颜色

1、英文：red，green等

2、十六进制：#00ff00（#0f0）、#ffffff（#fff），尽量用16进制的简写，#ff00fe不能简写

3、GRB

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*英文*/

        li:nth-child(3n){

            color:red;

        }

        /*十六进制*/

        li:nth-child(2){

            color:#ff00ff;

        }

        /*RGB    */

        li:nth-child(4){

            color:rgb(203,35,224);

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</body>

</html>

CSS学习笔记2：选择器的更多相关文章

  1. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  2. CSS学习笔记(1):选择器

    一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  6. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  7. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. vue 运行时报 dependency was not found:错误

    这种报错我知道的有两种情况引起: 第一种: 是在引入文件的时候路径不对, 解决办法是: 只要在加一个./就行了: import test from './test' 改成先对路径 如果是安装的模块的话 ...

  2. HTML替换元素,非替换元素和控制元素

    替换元素:元素内容由标签的属性来设置,标签其实就是一个占位符.替换元素因为元素内容来自外部资源,所以这些标签大多具有src,指明要引入的资源路径,所以大多仅需要一个标签就可以.例如:<link ...

  3. RabbitMQ相关使用命令

    启动:rabbitmq-server -detached 停止:rabbitmqctl stop 状态:rabbitmqctl status 查看所有用户rabbitmqctl list_users ...

  4. 【错误】mysql 出现 "1067 - Invalid default value for 'UPDATE_TIME' " 错误提示的解决办法

    今天工作中遇到修改表结构的时候出现错误 Invalid default value for 'UPDATE_TIME 问题原因是因为db 表中update_time的默认时间写成了 '0000-00- ...

  5. ARM Cortex-M底层技术(2)—启动代码详解

    杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...

  6. Taro -- 微信小程序wxParse达到html转换wxml

    Taro微信小程序可以用wxParse来达到html转换wxml的效果:https://github.com/NervJS/taro-components-test/blob/master/src/p ...

  7. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) - C

    题目链接:http://codeforces.com/contest/831/problem/C 题意:给定k个评委,n个中间结果. 假设参赛者初始分数为x,按顺序累加这k个评委的给分后得到k个结果, ...

  8. [HEOI2015]兔子与樱花（贪心）

    [HEOI2015]兔子与樱花 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由\(n\)个树枝分叉点组成,编号从\ ...

  9. Zabbix通过邮件发送Screen图形报表实现

    在使用Zabbix的过程中,我们通常会建立一些需要的Screen图形报表来汇总需要监控的Graph. 而下面的两个脚本,则是通过从Zabbix数据库中获取所有的Screen图形参数,提供Zabbix的 ...

  10. Spring中都用到了哪些设计模式

    JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是千篇一律,而且大部分都年代久远.所以,花了 ...