一.标签选择器

<!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. Java安全之URLDNS链

    Java安全之URLDNS链 0x00 前言 在学习Java的反序列化漏洞的时候,就不得不学习他的一个利用链.很多刚刚入门的对于利用链这个词可能比较陌生.那么这里先来了解一下Java反序列化和反序列化 ...

  2. Python实现的数据结构与算法之队列详解

    本文实例讲述了Python实现的数据结构与算法之队列.分享给大家供大家参考.具体分析如下: 一.概述 队列(Queue)是一种先进先出(FIFO)的线性数据结构,插入操作在队尾(rear)进行,删除操 ...

  3. 极客 Play 玩 Terminal——GitHub 热点速览 Vol.40

    作者:HelloGitHub-小鱼干 多少人以为暗黑的终端便是一名程序员的工作台,其实上,终端可以不只是一个输入 command 的界面,也可以是本周特推 kb 一样,面向极客的极简命令行知识库管理器 ...

  4. Linux操作系统（第二版）（RHEL 8/CentOS 8）

    Linux操作系统(第二版)(RHEL 8/CentOS 8) http://www.tup.tsinghua.edu.cn/booksCenter/book_08172501.html Linux操 ...

  5. 如何win7安装tomcat

    首先安装jdk,查看当前jdk版本. >java -version 显示的是1.8.0_131 为此我们安装的tomcat版本是apache-tomcat-9.0.38-windows-x64. ...

  6. 强大的table组件-antd pro table

    概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...

  7. DE2资源集锦

    1.The School of Electrical and Computer Engineering (ECE) at the Georgia Institute of Technology:htt ...

  8. centos8上使用gitosis管理git项目

    零,centos8平台如何安装gitosis服务? 参见:centos8平台安装gitosis服务 地址:https://www.cnblogs.com/architectforest/p/12456 ...

  9. centos8平台用NetworkManager/nmcli管理网络

    一,centos8上,网络服务的管理需要NetworkManager服务 1,NetworkManager的服务操作 启动 [root@localhost network-scripts]# syst ...

  10. 第二个 SignalR，可以私聊的聊天室

    一.简介 上一次,我们写了个简单的聊天室,接下来,我们来整一个可以私聊的聊天室. SignalR 官方 API 文档 需求简单分析: 1.私聊功能,那么要记录用户名或用户ID,用于发送消息. 2.怎么 ...