标签（空格分隔）： 标签选择器

选择器定义：

在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

基础选择器包含：

1.标签选择器

2.类选择器

3.ID选择器

4.通用选择器

标签选择器：

顾名思义通过标签名来选择元素；

例如：

p {

  color: red;

}

将所有的p标签设置字体颜色为红色。

如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的选择器</title>

    <style type="text/css">

        /*标签选择器*/

        /*p{*/

            /*color:red;*/

            /*font-size:20px;*/

        /*}*/

        /*span{*/

            /*color:yellow;*/

            /*font-size:20px;*/

        /*}*/

        body{

            color: gray;

            font-size: 12px;

        }

    </style>

</head>

<body>

<!--

css选择器

1.标签选择器：

        标签选择器，可以选中所有的标签，比如div,ul,li,p等等；

        不管标签的藏得多深，都能选中；

        选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"

-->

    <div>

        <p>我是一个段落</p>

        <ul>

            <li>

                <span>

                    想想吧！！！

                </span>

            </li>

        </ul>

    </div>

    <div>

        <div>

            <div>

                <div>

                    <p>

                        藏得深的段落

                    </p>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

id选择器：

通过元素的ID值选择元素：

例如：

#i1 {

  color: red;

}

将id值为i1的元素字体颜色设置为红色。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的选择器</title>

    <style type="text/css">

        /*id选择器*/

        #box{

            color: green;

        }

        #s1{

            color: red;

        }

        #s2{

            color: red;

            font-size:16px;

        }

    </style>

</head>

<body>

<!--

css选择器

1.标签选择器：

        标签选择器，可以选中所有的标签，比如div,ul,li,p等等；

        不管标签的藏得多深，都能选中；

        选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"

2.id 选择器：

    #选中id

    同一个页面中id不能重复，

    是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；

-->

    <div>

        <p>我是一个段落</p>

        <ul>

            <li>

                <span>

                    想想吧！！！

                </span>

            </li>

        </ul>

    </div>

    <div>

        <div>

            <div>

                <div>

                    <p>

                        藏得深的段落

                    </p>

                </div>

            </div>

        </div>

    </div>

    <div id="box">

        <span id="s1">123</span>

        <span id="s2">234</span>

    </div>

</body>

</html>

类选择器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的选择器</title>

    <style type="text/css">

        /*id选择器*/

        #box{

            color: green;

        }

        #s1{

            color: red;

        }

        #s2{

            color: red;

            font-size:16px;

        }

        .titile{

            color: yellowgreen;

            font-size: 12px;

        }

        .aaaa{

            color: red;

        }

    </style>

</head>

<body>

<!--

css选择器

1.标签选择器：

        标签选择器，可以选中所有的标签，比如div,ul,li,p等等；

        不管标签的藏得多深，都能选中；

        选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"

2.id 选择器：

    #选中id

    同一个页面中id不能重复，

    是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；

3.类选择器：

    所谓类：.，class 与id非常的相似，可以作用任何标签，

    但是id特性是唯一，但是类是可以重复的，叫做归类；

    同一个标签中可以携带多个类；多个类之间用空格隔开；

-->

    <div>

        <p>我是一个段落</p>

        <ul>

            <li>

                <span>

                    想想吧！！！

                </span>

            </li>

        </ul>

    </div>

    <div>

        <div>

            <div>

                <div>

                    <p>

                        藏得深的段落

                    </p>

                </div>

            </div>

        </div>

    </div>

    <div id="box">

        <span id="s1">123</span>

        <span id="s2">234</span>

    </div>

    <div>

        <h3 id="h" class="titile xiaoma egon aaaa">woshi yige sanji bieti </h3>

        <h3 class="titile">woshi yige sanji bieti </h3>

        <h3 class="titile">woshi yige sanji bieti </h3>

        <h3>woshi yige sanji bieti </h3>

        <h3>woshi yige sanji bieti </h3>

        <h3>woshi yige sanji bieti </h3>

    </div>

</body>

</html>

类选择器：具体的可以查看代码注释里面；

如何正确的使用类选择器及总结：

需求：

段落1：40px,绿色

段落2：绿色，下划线

段落3：下划线，40px

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习</title>

    <style>

        .lv{

            color: green;

            font-size: 40px

        ;

        }

        .l2{

            text-decoration: underline;

            color: green;

        }

        .l3{

            font-size: 40px;

            text-decoration: underline;

        }

    </style>

    <div>

        <p class="lv">段落1</p>

        <p class="l2">段落2</p>

        <p class="l3">段落3</p>

    </div>

</head>

<body>

</body>

</html>

方案2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习</title>

    <style>

        .lv{

            color: green;

        }

        .un{

            text-decoration: underline;

        }

        .big{

            font-size: 40px;

        }

    </style>

    <div>

        <p class="lv big">段落1</p>

        <p class="lv un">段落2</p>

        <p class="un big">段落3</p>

    </div>

</head>

<body>

</body>

</html>

总结：不要试图，用一个类的页面写完，这个标签要携带多个类共同设置样式，

2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

  • 总结：

    到底是用id修改样式还是用class呢？

    答案：尽可能的使用class，除非特殊的原因，ID是用来js，也就是说js是通过ID来获取到标签的，后边我们还会说的这个内容；在css中尽量不要用id，（一般的来说，css用class,js用ID，更像是一种约定）

css之标签选择器的更多相关文章

  1. css用标签选择器在本页写样式

    <title>静夜思</title><style type="text/css">p{ color:#ff0000;   font-size:2 ...

  2. CSS各类标签用法——选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  4. CSS 标签选择器

    CSS 标签选择器 再<stype>标签内,通过指定输入标签来配置CSS样式 <html> <head> <!-- style 设置头部标签--> &l ...

  5. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  6. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  7. CSS标签选择器&类选择器

    基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...

  8. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  9. css标签选择器

    /*标签选择器*/ input[type="text"] { width: 60%; } </style>

随机推荐

  1. Spring history&Design Philosophy 简单介绍~

    SPRING框架的介绍和历史 Spring Framework是一个开源Java应用程序框架,最初是基于依赖注入(DI)和控制反转(IoC)的原理开发的. Spring Framework已经成长为控 ...

  2. vue实现淘宝购物车功能

    淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...

  3. java 程序编译和运行过程

    java整个编译以及运行的过程相当繁琐,我就举一个简单的例子说明: Java程序从源文件创建到程序运行要经过两大步骤: 1.源文件由编译器编译成字节码(ByteCode): 2.字节码由java虚拟机 ...

  4. python魔法方法

    1.__call__ 实现__call__后,该类的对象可以被调用 举例如: class test_call_: def __init__(self, n): self.n = n def __cal ...

  5. oracle12c安装+配置，plsql 13安装+激活

    oracle12c安装下载地址 oracle12c安装安装教程 Oracle 11g R2 Client(64bit)的下载与安装(图文详解) PLSQL Developer 11安装与配置 list ...

  6. CNN+BLSTM+CTC的验证码识别从训练到部署

    项目地址:https://github.com/kerlomz/captcha_trainer 1. 前言 本项目适用于Python3.6,GPU>=NVIDIA GTX1050Ti,原mast ...

  7. PHP-ML机器学习库之安装篇

    1.PHP-ML库安装要求:PHP>=7.1 2.切换到项目的跟目录下,使用composer进行安装:composer require php-ai/php-ml 安装完成后的目录如下: 新建测 ...

  8. lavarel 中间件

    创建中间件 php artisan make:policy UserPolicy 所有生成的授权策略文件都会被放置在 app/Policies 文件夹下. 让我们为默认生成的用户授权策略添加 upda ...

  9. mysql 计算两点经纬度之间的距离含具体sql语句

    mysql距离计算,单位m,以及排序 lon 经度 lat 纬度 一般地图上显示的坐标顺序为,纬度在前(范围-90~90),经度在后(范围-180~180) 首先新建一张表,里面包含经纬度 SET F ...

  10. sqlserver存储过程sp_send_dbmail邮件（html）实际应用

    前段时间因工作需求,特地学习了下sp_send_dbmail的使用,发现网上的示例对我这样的菜鸟太不友好/(ㄒoㄒ)/~~,好不容易完工来和大家分享一下,不谈理论,只管实践! 如下是实际需求: -- ...