1.类选择器（通过类名进行选择）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    .p1{

        color: #00ff00;

    }

    .p2{

        color: #0000ff;

    }

</style>

<body>

    <p class="p1">这是类选择器</p>

    <p class="p2">hello world</p>

</body>

</html>

效果图：

2.id选择器（通过id进行选择）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    #text{

        color: red;

    }

</style>

<body>

    <p id="text">这是id选择器</p>

</body>

</html>

效果图：

3.标签选择器（通过id进行选择）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    p{

        color: #f40;

        font-size: 25px;

    }

</style>

<body>

    <div>

        <p>这是标签选择器</p>

    </div>

</body>

</html>

效果图：

4.分组选择器（可一次选择多个标签以设置相同样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    p,a,li{

        color: blue;

    }

</style>

<body>

<p>这是分组选择器</p>

<p>hello</p>

<a href="#">world</a>

    <div>

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

        </ul>

    </div>

</body>

</html>

效果图：

5.后代选择器（选择某个标签的所有后代以设置相同样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    div ul li{

        color: red;

        list-style: none;

    }

</style>

<body>

    <div>

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

        </ul>

    </div>

</body>

</html>

效果图：

6.属性选择器（通过属性（如name属性）进行选择以设置相同的样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    [name="pra1"]{

        color: blue;

    }

    [name="pra2"]{

        color: red;

    }

</style>

<body>

    <p name="pra1">这是属性选择器</p>

    <p name="pra2">hello world</p>

</body>

</html>

效果图：

7.通用选择器（选择所有标签以设置相同样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    *{

        color: red;

    }

</style>

<body>

    <p>这是通用选择器</p>

    <p>hello</p>

    <p>world</p>

</body>

</html>

效果图：

8.兄弟选择器（选择兄弟关系的标签设置样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    p+a{

        color: green;

    }

</style>

<body>

        <p>这是兄弟选择器</p>

        <a>hello world</a>

</body>

</html>

效果图：

9.直接父子选择器（选择父子关系的标签中子标签设置样式）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    div>p {

        color: red;

    }

</style>

<body>

    <div>

        <p>这是直接父子选择器</p>

    </div>

</body>

</html>

效果图：

css的9个常用选择器的更多相关文章

  1. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  2. CSS选择器详解（一）常用选择器

    目录 类型选择器 类选择器 ID选择器 伪类 伪元素 类型选择器 通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...

  3. HTML&CSS基础-常用选择器

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

  4. css的书写规范+常用

    格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...

  5. css基础语法一（选择器与css导入方式）

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  6. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  7. 学习总结：CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  8. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  9. 01-css的引入方式和常用选择器

    一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

随机推荐

  1. 2018-4-30-win2d-CanvasRenderTarget-vs-CanvasBitmap

    title author date CreateTime categories win2d CanvasRenderTarget vs CanvasBitmap lindexi 2018-04-30 ...

  2. python常用函数 D

    defaultdict(set_type) 可以定义字典多值映射,入参类型决定value类型. 例子: deque:(int) 保留最后N个元素 例子: Decimal(float) 直接对浮点数进行 ...

  3. HTML基础 有序列表写个人收藏夹

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. CF555E Case of Computer Network

    题面:https://www.luogu.com.cn/problem/CF555E 题意:给定一张\(n\)个点\(m\)条边的无向图. 给定\(q\)组有向点对\((s,t)\). 询问是否存在使 ...

  5. MySQL MHA之 master_ip_failover.sh脚本

    master_ip_failover.sh脚本是用perl编写的,可以在mha-manager源码包中可以找到,下面给出的结合keepalived进行自动切换的脚本: [root@mha script ...

  6. 应用程序无法正常启动(0xc000007b)。请单击“确定”关闭应用程序

    一开始是报缺少dll,随便在电脑里找个同名的dll放下面就报这个错误,网上查的都没有用.后来又找了一个dll,问题就解决了,所以是dll不对造成的.

  7. loj2542 「PKUWC2018」随机游走 MinMax 容斥+树上高斯消元+状压 DP

    题目传送门 https://loj.ac/problem/2542 题解 肯定一眼 MinMax 容斥吧. 然后问题就转化为,给定一个集合 \(S\),问期望情况下多少步可以走到 \(S\) 中的点. ...

  8. logging error. UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128)

    根据错误提示, 找到出错的文件. 可以看到, 出错的文件是 logging 模块中的__init__.py 文件. 根据目录, 找到 这个文件, 并打开它 搜查这个文件的内容, 找'encoding' ...

  9. Halo（十）

    Spring Converter(转换器) @FunctionalInterface public interface Converter<S, T> { //一对一转换 @Nullabl ...

  10. 【Mybatis】Mybatis缓存

    mybatis提供了缓存机制减轻数据库压力,提高数据库性能 mybatis的缓存分为两级:一级缓存.二级缓存 一级缓存是SqlSession级别的缓存,缓存的数据只在SqlSession内有效 二级缓 ...