一.标签选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        h1 {

            color: red;

        }

        h2{

            color: green;

        }

    </style>

</head>

<body>

    <h1>Hello World!</h1>

    <h1>Hello World!</h1>

    <h2>Hello !</h2>

    <h2>Hello !</h2>

</body>

</html>

二.类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            color: green;

        }

        .box1 {

            font-size: 26px;

        }

    </style>

</head>

<body>

    <div class="box box1">Hello World!</div>

    <span class="box">Hello World!</span>

</body>

</html>

三.ID选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

#box{

    color: green;

}

    </style>

</head>

<body>

    <div id="box">Hello World!</div>

</body>

</html>

四.通配符选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            color: red;

        }

    </style>

</head>

<body>

    <div>Hello World</div>

</body>

</html>

五.后代选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        ul li {

            color: red;

        }

        ul li a {

            color: green;

        }

        .nav li {

            color: yellow;

        }

    </style>

</head>

<body>

    <ul>

        <li>ul li</li>

        <li>ul li</li>

        <li>ul li</li>

        <li>ul li</li>

        <li>ul li <a href="">a</a></li>

    </ul>

    <ol>

        <li>ol li</li>

        <li>ol li</li>

        <li>ol li</li>

        <li>ol li</li>

        <li>ol li</li>

    </ol>

    <ul class="nav">

        <li>nav li </li>

        <li>nav li </li>

        <li>nav li </li>

        <li>nav li </li>

        <li>nav li </li>

    </ul>

</body>

</html>

六.子元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .nav>a {

            color: red;

        }

    </style>

</head>

<body>

    <div class="nav">

        <a href="#">Hello World</a>

        <p>

            <a href="#">Hello World</a>

        </p>

    </div>

</body>

</html>

HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）的更多相关文章

  1. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  3. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  4. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  5. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  6. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

  7. css系列教程--选择器

    css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}&l ...

  8. css系列，选择器权重计算方式

    CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...

  9. CSS（二）- 选择器 - 伪元素和伪类（思维导图）

    伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...

随机推荐

  1. 手写“SpringBoot”近况：IoC模块已经完成

    jsoncat:https://github.com/Snailclimb/jsoncat (About 仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架) ...

  2. 在java中使用SFTP协议安全的传输文件

    本文介绍在Java中如何使用基于SSH的文件传输协议(SFTP)将文件从本地上传到远程服务器,或者将文件在两个服务器之间安全的传输.我们先来了解一下这几个协议 SSH 是较可靠,专为远程登录会话和其他 ...

  3. spring redis 配置

  4. shell-变量的数值运算与特殊应用expr

    1. expr(evaluate expressions)命令的用法: expr命令一般用于整数值,当也可用于字符串,用来求表达式变量的值,同时expr也是一个手工命令行计算器. 语法:expr ex ...

  5. c# 误区系列（一）

    前言 整理很早以前认为的一些误区,准备整理一个系列.新手可以看下,然后大佬指点一下是否哪些地方错了. 正文 值类型存在栈上,引用类型存在堆上 很多人认为用这句话来解释值类型和栈类型的区别,甚至有些文章 ...

  6. rs232转rs485

    rs232转rs485 rs232转rs485 ZLAN9223E是上海卓岚科技开发的一款先进的无源RS232转RS485转换器.具有如下优点: 支持最高达230400bps的波特率.高波特率下供电能 ...

  7. 【C语言编程入门笔记】排序算法之快速排序，一文轻松掌握快排！

    排序算法一直是c语言重点,各个算法适应不用的环境,同时,在面试时,排序算法也是经常被问到的.今天我们介绍下快速排序,简称就是快排. 1.快速排序思想: 快排使用 分治法 (Divide and con ...

  8. 机器分配----线性dp难题（对于我来说）

    题目: 总公司拥有高效设备M台, 准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M <= 15, ...

  9. kubernetes:用kubeadm管理token(kubernetes 1.18.3)

    一,token的用途: 1,token是node节点用来连接master节点的令牌字串, 它和ca证书的hash值是把一台node节点加入到kubernetes集群时要使用的凭证 2, 通过kubea ...

  10. spring boot:用redis+lua实现表单接口的幂等性(spring boot 2.2.0)

    一,什么是幂等性? 1,幂等: 幂等操作:不管执行多少次,所产生的影响都和一次执行的影响相同. 幂等函数或幂等方法:可以使用相同的参数重复执行,并能获得相同的结果的函数/方法. 这些函数/方法不用担心 ...