一.标签选择器

<!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. const放在函数前后的区别

    转载:const放在函数前后的区别 一.const修饰指针 int b = 500; 1.const int * a = & b; 2.int const * a = & b; 3.i ...

  2. 持续更新——dp的一些技巧

    共菜鸡笔者看的--会慢慢更新,也请看到的大佬留意一眼,指出不足. 对于一些对部分点的二维\(dp\),状态从左上角继承而来时,对于一个点\((x,y)\),对它编号\(x*m+y\),按照这个顺序\( ...

  3. 【题解】PTA-Little Bird

    Link 单调队列板子. 题目大意:一个点可以由距离它不超过\(k\)的点跳过来,如果那个点比它高就不需要花费体力,否则花费\(1\)的体力.问走到\(n\)的最小体力,多组询问. 显然的转移方程,设 ...

  4. Linux 百度网盘卡在等待页

    解决办法1 如果无法登录百度网盘,一直在加载,运行命令:rm -rf ~/baidunetdisk 然后关闭百度客户端,重新登录百度客户端. 解决办法2 如果已经登录进百度网盘,退出百度网盘时,不要直 ...

  5. kubernetes-介绍与特性

    1. kubernetes概述 1) kubernetes是什么 2) kubernetes能做什么 3) kubernetes特性 4) kubernetes集群架构与组件 5) kubernete ...

  6. go 多协程爬取图片

    package main import ( "fmt" "github.com/antchfx/htmlquery" "golang.org/x/ne ...

  7. linux(centos8):firewalld对于请求会选择哪个zone处理?

    一,firewalld对一个请求会适用哪个zone? 当接收到一个请求时,firewalld具体使用哪个zone? firewalld是通过三个步骤来判断的: source,即:源地址 interfa ...

  8. APP脱壳方法三

    第一步 手机启动frida服务 第二步 手机打开要脱壳的app 第三步编辑hook代码 agent.js /* * Author: hluwa <hluwa888@gmail.com> * ...

  9. python的部分GUI模块简介tkinter、pyqt5（Qt Designer）

    笔者认为,这两个作为Python3较为常用且简单的GUI模块,是Python开发者所必须学习至少是了解的. 其中tkinter为Python3自带的GUI模块,而pyqt5则需要通过pip insta ...

  10. py中变量名的“秘密”

    今天突然脑子发抽,想到py里有没有指针这个概念,于是我马上google.baidu了一波,发现网上大多都在说py.java.c#这类纯面向对象的编程语言用对象的概念能完全替代指针.那么问题来了,没有指 ...