请问 什么情况下用id选择器 ，什么情况下用户 class选择器
请问 什么情况下用id选择器 ，什么情况下用户 class选择器
非常感谢！
写下你的评论...
写下你的评论...
写下你的评论...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11子选择器到底有什么用？
子选择器到底有什么用？ 没明白有什么意义？
写下你的评论...
不是這樣的好么，你自己試一下
写下你的评论...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-111949人阅读
JavaScript
Html中有三种方法可以使用CSS，而在css中，有三种基础的选择器
1、元素选择器
也叫标签选择器，即在CSS中利用标签名称来定义其外观
2、类选择器，是用点.符号开头，后面跟上一个自定义的名称，在使用时候，以HTML标签的class属性来标记
3、ID选择器，以符号#开头，后面跟上一个自定义的名称，在使用时以HTML标签的id属性来标记。
以下是几种选择器的使用实例
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="Generator" content="EditPlus(R)"&
&meta name="Author" content=""&
&meta name="Keywords" content=""&
&meta name="Description" content=""&
&link href="style.css" rel="stylesheet" type="text/css"&
&!--第一种使用CSS方法，外部样式表，前提是在同一目录下--&
&title&CSS语法练习日&/title&
&style type="text/css"&
body {background-color:white}
&span style="font-family: Arial, Helvetica, sans-"&&span style="color:#ff0000;"&&!--1、利用body标签定义背景颜色为白色--&&/span&&/span&
.news {color:red}
&span style="color:#ff0000;"& &span style="font-family: Arial, Helvetica, sans-"&&!--2、利用类选择器，自定义的名称为news--&&/span&&/span&
#p1 {color:blue}
&span style="font-family: Arial, Helvetica, sans- color: rgb(255, 0, 0);"&&!--3、利用ID选择器，自定义的名称为p1--&&/span&
&/style&&!--第二种使用css方法，利用内部样式表style标签--&
&body style="background-color:black"&
&h1 class=nwes&新闻1&/p&
&p class="news"&新闻2&/p&
&p id="p1"&另一个段落&/p&
&p style="color:red"&这是第三种应用CSS样式的方法&/p&&!--这是第三种应用CSS样式方法，即行内样式表--&
复合选择器
除了单独使用这些选择器之外，CSS还可以使用复合选择器，即明确定位到哪一个标签，如在上面代码中，news前面加上P.news，即直接定位到标签P，而p1标签里面的新闻1不会改变。CSS选择器种类及及其使用介绍
互联网 & 12-11 17:13:46 & 作者：佚名 &
常用的有标签选择器、类选择器、ID选择器等等，其实还有很多，在接下来的文章中为大家详细介绍下这些选择器的种类及其使用
首先说主要都有哪些先择器 1.标签选择器（如：body,div,p,ul,li） 2.类选择器（如：class=&head&,class=&head_logo&） 3.ID选择器（如：id=&name&,id=&name_txt&） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开） 6.继承选择器（如：div p,注意两选择器用空格键分开） 7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。） 8.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 在标签内写入style=& &的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。 我们分别来看下这些选择器： 1：标签名选择器 一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。 代码如下: div {color:border:1} p {color:#000;} 2：类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。 代码如下: &div class="test"&测试代码&/div& .test {color:border:1} 在html文档里，我们在要控制样式的标签的开标签（非成对标签如input直接放在标签里）里加入 class=&xxx&,在页面对应的css文件里，用.xxx就可以指向这个标签，从而对这个标签进行控制，我们称这种通过定义类（class）来找到标签的方式为 ：类选择器。 这种定义class 的方式是前端开发最常用的选择器，有几个突出的特点：可以给不同的标签设置同一个类，从而用一条CSS命令控制几个标签，减少大量代码，是页面修改简单，易维护，易改版；其次，后台工作人员机会不会用到有关class的相关设置，不需要跟后台人员之间进行交互；再者，可以通过js等动态改变标签的Classname，从而改变整个标签的样式，使前端动态效果实现起来更为容易。 3：ID选择器 ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。 代码如下: &div id="test"&测试代码&/div& #test {color:border:1} 有 ID 的 HTML元素可以被JavaScript来操纵.再就是ID也是后台开发人员会经常用的，所以前端开发人员应该尽量少的使用。 4.全局选择器 全局选择器是一个星号。它能作用于XHTML文档中的所有元素。 代码如下: *{margin:0; padding:0;} 5.组合选择器 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。 比如 .orderlist li {xxxx} 或者 .tableset td {} 我们使用的时候一般用在重复出现并且样式相同的一些标签里，比如 li td dd等。 比如 &h1 class=&red&&&/h1& H1.red {color: red} 群组选择器 代码如下: .test1,span,test2 {border:1} div,span,img {border:1} 群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。 6.继承选择器 学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。以下通过实例来详细讲解这两个重要的CSS概念。 文档树 CSS的继承 继承选择器 代码如下: &div class="test"& &span&&img src="xxx" alt="示例图片"/&&/span& &/div& .test span img {border:1} div span img {border:1} 后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。 7.伪类选择器 伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。 a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上 8.字符串匹配的属性选择符--主要有三种 语法：E[att^=&val&] ： {attribute} 说明：匹配具有att属性、且值以val开头的E元素 代码如下: &span style="font-size:18"&&style type="text/css"& p[title^="val"] {color:#FF0000;} &/style& &body& &div style="width:733 border: 1px solid #666; padding:5"& &p title="value"&匹配具有att属性、且值以val开头的E元素&/p& &/div&&/span& 语法:E[att$=&val&] ： {attribute} 说明：匹配具有att属性、且值以val结尾的E元素 代码如下: &style type="text/css"& p[title$="val"] {font-weight:} &/style& &body& &div style="width:733 border: 1px solid #666; padding:5"& &p title="this is val"&匹配具有att属性、且值以val结尾的E元素&/p& &/div& &/body& 语法:E[att*=&val&] ： {attribute} 说明：匹配具有att属性、且值中包含val的E元素。 代码如下: &style type="text/css"& p[title*="val"] {text-decoration:} &/style& &title&子串匹配的属性选择符 E[att*="val"]&/title& &/head& &body& &div style="width:733 border: 1px solid #666; padding:5"& &p title="have val word"&匹配具有att属性、且值中含有val的E元素&/p& &/div& &/body&
大家感兴趣的内容
12345678910
最近更新的内容12673人阅读
html/css（55）
　　1. + 选择器
　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
　　比如：
type="text/css"&
margin-top:50px;
color:red;
&This is paragraph.&
&This is a heading.&
&This is paragraph.&
&This is paragraph.&
　　效果如图：
　　兄弟只会印象下面的p标签的样式，不影响上面兄弟的样式。
　　注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
　　当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：
　　示例：
type="text/css"&
color:red;
&List item 1&
&List item 2&
&List item 3&
　　效果：
　　可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
　　２. ~ 选择器
　　作用是查找某一个指定元素的后面的所有兄弟结点。
　　示例代码：
type="text/css"&
color:red;
　　运行结果：}