css常用选择器

CSS常用选择器:标签选择器,类选择器,ID选择器,派生选择器,子选择器,组合选择器

1:标签选择器:如果是一个声明,则不需要带分号,如果是多个声明,则最后一个声明不需要带分号

h1{
    color: red
}
h1{
    color: red; font-size: 14px
}

2、类选择器:在CSS里用一个点开头表示类别选择器定义,所有类的选择器的名字以一点开始,在句点后面必须以字母开始,类名中允许使用字目,数字,连字号”-“和下划线”_”,类名分大小写,类选择器可以单独使用,也可以也可以与其他元素结合使用。

.important {color:red;}

*.important {color:red;}

结合其他元素使用

p.important {color:red;}

选择器现在会匹配class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。

3、id选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。

 #red {color:red;}  #green {color:green;}

id选择器只能用一次。 id 选择器和派生选择器

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。 即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

#sidebar p{
    font-style: italic; text-align: right; margin-top: 0.5em;
}
#sidebar h2{
    font-size: 1em;font-weight: normal; font-style:italic;   margin: 0;line-height: 1.5;text-align: right;
}

给标签内的标签定义样式。 派生继承器

h1  strong{
    color:red;
}

只有当<strong>出现在<h1>标签里才改变颜色。 没有出现在<h1>标签内的<strong>事件则不会受到影响。

子选择器:子选择器(child selector)仅是指它的直接后代

#links>a{
    color:blue;
}

组合选择器  在对多个元素应用相同的样式,允许组合多个选择器,用逗号将它们分开。

 h1,h2,h3,h4  {  
    color:red;
}
时间: 2024-11-05 15:55:23

css常用选择器的相关文章

【css】css常用选择器

css常用选择器 * 通配选择器 选择文档中所以HTML元素 E 元素选择器  选择指定类型的HTML元素 #id ID选择器  选择指定ID属性值为"id"的任意类型元素 .class 类选择器   选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 E F 后代选择器(包含选择器)  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选

文章标题CSS常用选择器及与HTML结合方式

标签分类: 块级标签:block ` div p ul li table 行内标签:in line span CSS与HTML结合方式: A:在标签中的style属性里书写css代码 例:<div style="color:red;" >大家好</div> B:把css代码写到head中的style标签里,可提高css代码的重用性. 例: <style type="text/css" > div{ color:red; } <

CSS常用选择器记录-:nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字.关键词或公式. .step_icon3 li.item{ width: 30%; height: 40px; text-align: center; padding-top: 10px -5px 0px; } .step_icon3 li.item:nth-of-type(1){ background:url(../img/find_pw_on_1.png) no-repeat cent

HTML常用标签及CSS样式选择器

HTML常用标签及CSS样式选择器 html部分 <!DOCTYPE html> <html> <head> <!--头标记 写描述性的信息(css\javaScript)--> <!--引入外部的样式文件 rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系 --> <link rel="stylesheet" type="text/css" href=&

学习css常用基本层级伪类属性选择器

常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给class是hcls的一类标签设置模式:3.id选择符#h3{}//给id是h3的标签设置样式:4.关联选择符#div h1.#div h1.ljhcls:5.div,h1,pmspan,button{}基本选择器分为:first-child第一个.::first-letter第一个字母.::fist-li

CSS选择器(常用选择器)

常用选择器 直接选择标签名: id选择器 为图中“哈哈哈哈”单独改变样式 class属性 为下图中四行“嘻”字设置样式,我们可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复 拥有相同class属性值的元素我们可以说它们是一组元素 可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开 id为one元素,class为two元素,和h1,同时设置一个背景色为红色 此方法较为麻烦,可使用选择器分组{并集选择器} 通过选择器分组可以同时选中多个选择器对

css常用或不熟悉的

css优先级: !important 〉  行内样式  > id选择器  > 类选择器|伪类选择器  > 标签选择器  >  通用选择器  > 继承属性 综合优先级(只讨论选择器): 则下列选择器的优先级如何呢? .a1 div{} .a1 .a2{} .a1 div .a2 span{} #d1 div {} #d1 .a1 {} 则他们比较优先级的原则是: 1,  比较最高的优先级选择器的多少,多者胜: 2,  最高的数量相等的时候,比较次高,多者胜: 3,  依次类推

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

#3 CSS常用属性

CSS里面的样式非常多,但是常用的样式并不是很多. 下面主要是以下常用的,当然这个没涉及到考虑兼容性的问题.兼容性的主要还是要了解不懂浏览器之间的差异,具体我也半桶水,在努力学习中,等学会了,在总结一下分享给大家. -------2014.07.29 这个上课主要讲的布局,就是关于页面的布局,现在90%的网站都是用DIV+CSS布局的.所以应该好好掌握这次课的知识. 在学习DIV之前,我们还要熟悉一些常见的CSS样式. CSS的常用样式 字体: 1,line-height:50px