【CSS选择器】

1.标签选择器

  所有该标签都会被加上此效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        p{
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>测试文本1</p>
    <p>测试文本2</p>
</body>
</html>

2.类选择器

  类选择器可以同时作用在不同的标签元素上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>类选择器</title>
    <style type="text/css">
        .blue{
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="blue">测试文本1</p>
    <h1 class="blue">这是h标签</h1>
    <p>测试文本2</p>
</body>
</html>

  在一个标签中可以使用多个类选择器,达到复合使用的效果,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>类选择器</title>
    <style type="text/css">
        .red{
            color: red;
        }
        .big{
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p class="big">大的</p>
    <p class="red big">红的大的</p>
</body>
</html>

3.id选择器

  每个id名称只可使用一次。id选择器的基本作用是对每个页面中出现的唯一元素进行定义。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>id选择器</title>
    <style type="text/css">
        #red{
            color: red;
        }
        #big{
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p id="red">红色</p>
    <p id="big">大的</p>
</body>
</html>
时间: 11-17

【CSS选择器】的相关文章

CSS选择器

CSS选择器有:id选择器.派生选择器 1.id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. #red {color:red;} #green {color:green;} <p id="red">这个段落是红色.</p> <p id="green">这个段落是绿色.</p> 2.派生选择器 在现代布局中,id 选择器常常用于建立派生

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的.但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢.举个例子吧!先上一串代码和效果,就知道我想表达什么了! 上面一个五列的li,代码如下 <style> *{margin:0;padding: 0;list-style: none} ul{display: flex} li{flex: 1;text-align: center;border-left: 1px solid red} li:n

Day48:HTML(form标签)、CSS选择器

一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldset和 label标签. 表单属性 action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web method: 表单的提交方式 post/get默认取值就是ge

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

【CSS】使用CSS选择器

CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic selector).开发人员可使用这类选择器在文档中进行比较宽泛的选择,也可以将其看作结合多种选择器进行特殊选择的基础. 1.1 选择所有元素 通用选择器匹配文档中的所有元素.它是最基本的选择器,不过使用很少,因为匹配过于广泛. 下面代码是一个使用通用选择器的样式示例: <!DOCTYPE html>

CSS选择器优先级比较

CSS选择器的优先级,一般根据就近原则,更准确一点,根据选择器的权值大小比较,权值越高,则优先级越高.如果加上!important则优先级最高. 权值大小: !important 1000 id 100 class 10 属性 10 伪类 10 伪元素 10 标签 1 通配符* 0

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

第 13 章 CSS 选择器[上]

学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的版本已经升级至第三代,即 CSS3 选择器.CSS3 选择器提供了更多.更丰富的选择器方式,主要分为三大类. 一.选择器总汇 本节课主要涉及到三种选择器:基本选择器.复合选择器和伪元素选择器,具体如下: 选择器 名称 说明 CSS 版本 * 通用选择器 选择所有元素 2 <type> 元素选择器

CSS 选择器大全

CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3). 选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<