css中的选择器

1.在html中引入css的方法:四种方式:

a.行内式(也称内联式) 如:

<h1 style="color:red;test</h1>

b.内嵌式

<style type="text/css">

h1{

color:red;

font-size: 10.5pt; font-family: Calibri, sans-serif; line-height: normal; widows: auto;">                 }

</style>

c.导入式

<style type="text/css"> @import"mystyle.css";</style>

d.链接式

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

2.css选择器:包括基本选择器和复合选择器

基本的CSS选择器: 如 h1{color:red;font-size:25px;}这里h1为选择器名称,color和font-size为属性而red和25px为值。

基本的CSS选择器包括标记选择器,类选择器和ID选择器。

标记选择器:由html的标记构成css的选择器名称,如上例子说描述。

类选择器:可以应用于不同的元素。 例如<p>元素和<h>元素可以共用类选择器。

ID选择器:和类选择器一样,由开发者命名。id选择器只能赋给一个元素。

类别选择器定义的时候以 .开始  在元素中通过class属性来应用.

ID选择器定义的时候以 # 开始 在元素中通过id来应用。

注意:类选择器和ID选择器的优先级大于标记选择器。

复合选择器:

"交集"选择器:

div.special{...}

div#special{...}

"交集"选择器是指:以一个标记选择器开始 后面跟着一个类选择器或ID选择器, 它表示必须满足标记选择器的标记,同时必须声明了后面的类别或ID。

"并集"选择器:

div,h1.first,p.specia{...}

多个选择器通过逗号相连,只要满足其中任一个选择器的元素都会被选中。

"后代选择器":

div h1.first span.firstLetter{......}

多个选择器通过空格相连,表示同时满足所有的选择器的元素会被选中。

css的继承特性:当使用CSS对某一个元素设置以后,这样的一个设置会对该元素产生作用,以及对该元素所有的子元素产生作用.(文档结构对象模型DOM)

css的层叠特性:解决样式的重叠现象。

规则:  行内样式>ID样式>类别样式>标记样式

时间: 2024-10-24 20:19:30

css中的选择器的相关文章

9 css中通用选择器的用法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>css样式标签</title> <style type="text/css"> *{color:red; font-size:18px; } </style> <body> <h1>勇气</h1> <p>三

8 css中包含选择器的用法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>css样式标签</title> <style type="text/css"> .food li{border:1px solid red;} .first span{border:1px solid red;} </style> <body>

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选

HTML5中class选择器属性的解释

设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id正好相反,id属性一般建议少用,在小型网站中页面元素不多的情况下我们推荐是id,而在大众型网站我们推荐使用class 如: <div id="box">HTML5</div> 复制代码 class选择器 <div class="box"&g

CSS:id选择器的使用

本文介绍css中id选择器的基本用法:为某个特定的标签内容设置属性. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equi

CSS:属性选择器

本文介绍css中属性选择器的基本用法:为具备指定属性的标签设置样式. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equi

CSS:class选择器

本文介绍css中class选择器的基本用法:为同一个类型的标签设置属性. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-eq

1、CSS 语法和选择器

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: h1 { color:blue; font-size:12px; } 选择器通常是您需要改变样式的 HTML 元素.每条声明由一个属性和一个值组成.属性是您希望设置的样式属性.每个属性有一个值.属性和值被冒号分开. CSS 注释: /*这是个注释*/ 选择器的优先级: 标签内部样式 > id > class > 标签选择器 标签选择器实例: <style> h3{ color:red; } </style&