Heim > Web-Frontend > HTML-Tutorial > CSS基础知识笔记(二)之选择器_html/css_WEB-ITnose

CSS基础知识笔记(二)之选择器_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:32:57
Original
2043 Leute haben es durchsucht

CSS选择器

选择器{ 样式; }

每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、

CSS基础知识笔记(二)之选择器_html/css_WEB-ITnose。例如下面代码:

p{font-size:12px;line-height:1.6em;}
Nach dem Login kopieren

上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

类选择器

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法: .类选器名称{css样式代码;} 注意: 1、 英文圆点开头 2、其中 类选器名称可以任意起名(但不要起中文噢) 使用方法: 第一步:使用合适的标签把要修饰的内容标记起来,如下: MyCSS 第二步:使用class="类选择器名称"为标签设置一个类,如下: class="stress">MyCSS 第三步:设置类选器css样式,如下: .stress{color:red;}/* 类前面要加入一个英文 圆点*/


ID选择器

ID选择器都类似于类选择符,但也有一些重要的区别:

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

CSS中#和.的区别

id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义;

class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义。

定义HTML中的标签,如ul,img,p等时,直接写:img{}

class是样式组,用.style定义,class="style":
.style定义样式组,可以被反复调用,就是说你一个页面里,可以有多个元素用同一个style;

ID是固定标签,用#style1定义,ID="style1"

#main和.main有什么区别:

#main 定义的是ID为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一次;而.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一个层里同时出现ID和CLASS样式,ID更优先于CLASS。

简单来说: #main是定义具体对象main的专有属性;.main是定义抽象对象的共有属性main。比较广泛的用途是#用于定义网页框架;.用于定义各个网页元素。#main中的main只能在网页中出现一次,而.main中的main可以出现无数次。

eg:

.setBlue{   color: blue;}#setRed{   color: red;}
Nach dem Login kopieren

相同点:可以应用于任何元素
不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。


子选择器

子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素如下代码:

 <head>   <style>     .setLable>label{      color: gold;   }   </style></head><body>   <form method="post" accept="save.php" class="setLable">      <label for="username">Username</label>      <input type="text" name="username" id="username" value=""/>      <br>      <lable for="password">Password</lable>      <input type="password" name="pass" id="pass" value=""/>      <br>      <input type="submit" value="Sumit" name="submit"/>      <input type="reset" value="Reset" name="reset"/>   </form>
Nach dem Login kopieren

Nach dem Login kopieren
Nach dem Login kopieren

包含(后代)选择器

包含选择器:即加入空格,用于选择指定标签元素下的后辈元素如右侧代码编辑器中的代码:

.first  span{color:red;}
Nach dem Login kopieren

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

.setGreen option{   color: green;}<select multiple="multiple" class="setGreen">   <option value="House Blend">House Blend</option>   <option value="Caffee Latte">Caffee Latte</option>   <option value="Cappuccino">Cappuccino</option>   <option value="Chain Tea">Chai Tea</option></select><br />
Nach dem Login kopieren

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体的字号为16px

*{   font-size: 16px;}
Nach dem Login kopieren

伪类选择符

伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

Nach dem Login kopieren
Nach dem Login kopieren

a:hover{color:red;}
Nach dem Login kopieren

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

分组选择符

当为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}
Nach dem Login kopieren

它相当于下面两行代码:

h1{color:red;}span{color:red;}
Nach dem Login kopieren

eg:
Nach dem Login kopieren

<style type="text/css">/*h1,span{color:red;}*/.first,#second>span{            color:green; }</style>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage