一.标签选择器

<!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. Lyndon Word相关

    Lyndon Word 定义 对于字符串 \(S\),若 \(S\) 的最小后缀为其本身,那么称 \(S\) 为 \(\text{Lyndon}\) 串(\(\text{Lyndon Word}\)) ...

  2. spring-boot-route（八）整合mybatis操作数据库

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...

  3. P2034 选择数字 / P2627 [USACO11OPEN]Mowing the Lawn G

    Link 题目描述 给定一行 \(n\) 个非负整数 \(a[1]..a[n]\) .现在你可以选择其中若干个数,但不能有超过 \(k\) 个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入 ...

  4. JavaScript DOM三种创建元素的方式

    三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...

  5. 用< 100行代码向EPUB或Web服务器添加视频回放

    下载source - 32.3 KB 下载latest version from GituHub 介绍 在我 在关于CodeProject的前一篇文章中,我展示了一个简单的EPUB查看器 Androi ...

  6. jq显示数据在kindeditor

    1,定义编辑器的变量为全局变量 2,将数据显示到kindeditor   在我自己这里_下划线相当于数据,也就是将数据显示在kindeditor 中的textarea中 3,jquery获取kinde ...

  7. 在nginx下导出数据库数据

    首先上干货 解决问题 set_time_limit(0); //设置脚本运行时间为不限制 因为php脚本默认时间为30秒 ini_set('memory_limit', -1); //取消脚本运行内存 ...

  8. 玩转控件:GDI+动态绘制流程图

       前言 今天,要跟大家一起分享是"GDI+动态生成流程图"的功能.别看名字高大上(也就那样儿--!),其实就是动态生成控件,然后GDI+绘制直线连接控件罢了.实际项目效果图如下 ...

  9. Docker学习：（一）初识Docker

    Docker(容器虚拟化技术)要点(秒级启动) Docker的WWH公式学习 What[是什么]. Why[为什么要用它]. How[怎么用] 1.Docker简介 (1)问题:为什么会有docker ...

  10. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...