CSS选择器

简介: 基本规则每CSS规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性-值对. 1.元素选择器元素是最基本的选择器, h1,p,a都可以直接做为选择器,甚至是html本身.

基本规则

每CSS规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性-值对.
这里写图片描述

1.元素选择器

元素是最基本的选择器, h1,p,a都可以直接做为选择器,甚至是html本身.

 h1{color:#66CCFF;}
 h2{color:silver;}
 p{font-size:20px;color:#cccccc;}

一个选择器可以有多个声明,声明之间用分号隔开;一个属性也可以有多个值,中间用空格隔开.给h1加上边框,边框颜色会灰色,边框样式为实线,可以这样写:

border:1px solid #cccccc;

选择器分组:如果想同时把不同元素设置相同对样式,可以使用分组同时使用, 选择器之间用逗号隔开。比如需要把h1 和p都设置为字体颜色为红色:

h1,p{color:red;}

2. 通配选择器

通配选择器用一个星号(*)表示,这个选择器可以和任何元素匹配。例如,要把一个文档中所有的元素颜色都设置成银色,可以这样写:

*{color:silver;}

3. ID选择器

使用元素选择器会把一个文档中所有都元素都设置为同一样式,以h1{color:red;} 为例,会把所有的h1标签设置为红色,如果只想对一个特定的h1设置样式,可以通过设置id的方式定义规则.

<p id="p1">test1</p>
<p id="p2">test2</p>

只对第二个p标签设置样式:

#p2{color:silver;}

4.类选择器

通过给元素设置标记,同一类的元素可以有相同多样式.
下面的h1和p元素属于同一类,类名为cal.

   <h1 class="cla">Hello World</h1>
   <h2>safe information</h2>
   <p class="cla">Where there is a will,there is a way</p>

设置CSS样式:

.cal{color:color:#FF8000;}/*h1和p具有相同的颜色*/

也可以单独设置:

p.cal{ color:yellow;}/*对h1没有作用*/
  • 多类选择器
    下面对html代码中有2个p标签,第一个p标签有两个类标记,第二个p标签有一个类标记.
<p class="urgent warning"> When handling plutoium,care must be taken to ...</p>
<p> With plutoium,<span class="warning">The possibility...</span></p>

我们将类名为waring的标签字体颜色设为红色,类名为urgent的标签字体颜色设为绿色,那么类名为warning和urgent的标签应该是什么?

.warning{color:red;}
.urgent{color:green;}

这种情况只保留写在后面的类的属性,写在前面的会被覆盖掉. 对于多类名的也可以通过下面的方式设置:

.urgent.warning{background-color:blue;}
目录
相关文章
|
1月前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
1月前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
|
2月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
2月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
2月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
21 1
|
6天前
|
前端开发 开发者
【专栏:CSS基础篇】CSS选择器详解:精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性,详细阐述了基础选择器(元素、类、ID、属性和伪类/伪元素)及复杂选择器(后代、子元素、相邻兄弟和一般兄弟)的用法。通过理解并巧妙运用这些选择器,开发者能更高效地控制页面样式,提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能,助力创建优雅且强大的样式表,实现精准的网页设计。
|
7天前
|
前端开发 容器
【Web 前端】css选择器有哪些?
【4月更文挑战第22天】【Web 前端】css选择器有哪些?
|
19天前
|
前端开发
css的选择器,优先级和示例
css的选择器,优先级和示例
9 1
|
21天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
21 1
|
21天前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
35 1