1、计算机,网页设计中CSS各选择器的含义,用途和不同,尤其是复合内容选择器?
1元素选择器
HTML文档的元素名称就是元素选择器。 1)语法,例如:html<color:black;>、h1{color:blue;}、p{color:silver;} 2)缺点:不同的元素样式相同,即不能跨元素。所以做不到同一类元素下的细分。
2类选择器
自定义的某种选择器。 1)语法:.className{样式声明} 例如:.myClass{ background-color:pink;font-size:47px; } <h2>h2中的文本</h2> <p>p中的文本</p>
注意事项:
html文件中,所有元素都有一个class属性,如:<p></p>
类选择器还一种用法:<div id="d1"class="s1 s2">hello</div>,样式s1和样式s2对div共同起作用。
3分类选择器
将类选择器和元素选择器结果起来使用,以实现同一类元素下不同样式的细分控制。如<input>元素,又有按钮又有文本框的,采用分类选择器。 1)语法:元素选择器.className{样式声明} 例如: p.myClass{ color:red;font-size:27px } <h2>h2中的文本</h2> <p>p1中的文本</p> <p>p2中的文本</p>
4元素id选择器
以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器。 1)语法:定义id选择器时,选择器前面需要有一个“#”号,选择器本身则为文档中某个元素的id属性的值。 例如:#header{ color:red;background:yellow; } <h1 id="header">This is Title<h1>
u 注意事项:
v html文件中,所有元素都有一个id属性。且某个id选择器仅使用一次。
5派生选择器
依靠元素的层次关系来定义。某一包含元素下的一些相同子元素使用派生选择器。 1)语法:通过依据元素在其位置的上下文关系来定义样式,选择器一端包括两个或多个用空格分隔的选择器。 例如:h1 span{color:red;} <h1>This is a<span>important</span>heading</h1>
6选择器分组
对某些选择器定义一些统一的设置(相同的部分)。 1)语法:选择器声明为以逗号隔开的元素列表。 例如:h1,p,div{ border:1px solid black;}
7伪类选择器
伪类用于向某些选择器添加特殊的效果。 1)语法:使用冒号“:”作为结合符,结合符左边是其他选择器,右边是伪类。 2)常用伪类:有些元素有不同的状态,典型的是<a>元素。 ①:link:未访问过的链接 ②:active:激活 ③:visited:访问过的链接 ④:hover:悬停,鼠标移入,所有元素都能用 ⑤:focus:获得焦点 例如:a:link{ color:black;font-size:20px; } a:visited{ color:pink;font-size:20px; } a:hover{ font-size:27px; } a:active{ color:red; }
8选择器优先级
1)基本规则:内联样式 > id选择器 > 类选择器 > 元素选择器
2)优先级从低到高排序:
div < .class < div.class < #id < div#id < #id.class < div#id.class 例如:<div id="id" style="color:black;"></div>
2、网页设计css样式表 选择器+属性。下面是代码。把每一行代码解释下,分别是什么选择器以及作用
1 设置页面所有元素 默认字体为arial
2 标签选择器 body是标签 color是属性 gray是值
作用:设置body的颜色为gray
3 标签选择器 p和span是标签 font-style是属性 italic是值
作用:设置所有的p 和 span标签的字体 设置为倾斜
4 标签选择器 P下面的span是标签 color font-size是属性 #00ff00 12pt是值
作用:设置p下面的span 的color为绿色,字体大小12pt
下面都以此类推吧
5 ID选择器
作用:设置p下面id=t的元素的颜色跟字体
6 类别选择器
作用:设置p下面class=test的元素的字体跟颜色
7 标签选择器
作用:设置p下面id=hello 的span元素的字体跟颜色
8 类别选择器
作用:设置class=test的颜色 字体大小 和加粗
3、网页设计CSS交集选择器的疑惑
说实话抄,我不知道什么是交集选择器。。。不过照你的意思,应该是类选择器
类选择器class="se",而且这个类选择器是在p标签里面的
p.se的意思是呢,代码中凡是<p></p>里面class="se"的所有标签的样式
比如:
<div>
<p>
<span>一</span>
<span class="se">二</span>
</p>
<span class="se">三</span>
<a class="se">四</a>
</div>
你的样式p.se的作用范围是第二个span,对第三个span和a标签没有影响
.se就不一样了,同样的代码
<div>
<p>
<span>一</span>
<span class="se">二</span>
</p>
<span class="se">三</span>
<a class="se">四</a>
</div>
.se的作用对二,三,四都有影响,所以我们称class为类选择器
p.se和.se也就是作用范围不一样罢了,如果class="se"类才定义一个而已,那和id选择器是没有分别的,也就是说,id选择器只对一个标签有效,class可以对多个标签起作用
4、网页制作的选择器问题
重用:
经常会用到一些基本的式样叠加,比如字体的颜色和加粗。网页中可能同时出现三种情况:1.字体为红色 2.字体加粗 3.字体红色加粗
这时我们只需要定义前两个css:
.red{color:red;}
.b{font-weight:bold;}
第三种情况时用<div class="red b"></div>
子选择器:
相对来说,简化html文件的代码更加重要,因此在css中使用子选择器非常有益,同时也使css代码更加容易理解。比如下面的代码:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性,从而简化代码:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
组选择器:
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子选择器和组选择器的灵活使用可以非常有效的减少代码,同时非常有利的增加代码的可读性,具体的应用需要在具体编写过程中体会。
http://www.souzz.net/html/web/htmlcss/12499.html
5、网页开发的时候,怎么合理的选择用选择器??
在网页实来现中,如何合理的选用“自三种基本选择器”呢?
1、在此强烈推荐新手使用“类名选择器”。之所以选择“类名选择器”,主要原因在于:类名选择器可以同时选择多个元素,类似的元素可以使用同一个类名,比ID选择器操作起来更灵活;由于类名选择器必须定义,只有定义类名的标签才能够应用样式,并不会对网页中其他元素造成不必要的影响。
2、标签名选择器,由于其选择范围过广,会导致网页当中所有的同种类型标签都会被选中,此时很容易造成样式影响。不推荐使用。
3、ID选择器,优先级比较高,并且只能够选择一个,适合其使用的“环境”并不多。另外,ID选择器通常是给原生JavaScript预留,一旦看到ID选择器,就能够想“在这里应该是有JS功能存在的”。 不推荐使用。
6、网页设计中标签选择器,类选择器,ID选择器,组合选择器区别在哪里?
class 是类选择器
id 是id选择器
都是在css定义类名的时候用到,原则上都可以用,但是一般用类选择器,用id可能与后台程序id类重名
7、已经用css定义了多个属性选择器,怎样在一个div里用到好几种属性选择器呢?
<div class="class1 class2 class3 ..."></div>你好,多个class用空格隔开就可以了。
8、CSS 选择器有哪些,在网页设计中如何选择使用
<div id="demo">
<div class="inner">
<p><a href="#">链接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 选择器 .inner{ width:100px;}
id 选择器 #demo{ width:100px;}
标签 选择器 p{ width:100px;}
后代选择器 p a{ color: #f60;}
伪类选择器 a:hover{ color: #f00;}
伪元素选择器 a:after{ clear: both;}
属性选择器 input[type=checkbox]{ margin-left: 10px;}
css3选择器
由于ie的问题,比较常用的是前4种选择器。
9、jq如何同时设定多个元素的html?
$('a,b,c,d,e,f').html(loadingHtml);$(这里要填入的是CSS选择器代码),我们要选中abcdef多个元素就要用逗号。选择器代码必须要用引号作为字符串输入
10、关于网页设计里的三种基本选择器和三种复合选择器分别是什么?举例下~
1.标记选择器主要应用在HTML页中的标记样式选择。如P选择器就用于声明网页中有P标记的文本内容,同理,H1选择器则可以标记页面中H1的样式。例如:H1 { font-size:14px;font-weight:bold;color:#ccc;}以上代码表示在所有应用H1选择器的地方,将文字的大小设为14像素并加粗,同时将颜色设为灰色,如果要改变H1的颜色,只需将color属性更改就可以了,比如将color设为#e7eefe来与网页的其他地方协调。2.类别选择器这是一类最常用的选择器,用它来定义网页中需要特殊表现的样式,类别选择器的名称可以由作者自由定义,一般来讲类别选择器的命名最好有一定的意义,使CSS代码更易维护和阅读。例如定义导航就可以使用.hang{}或者是.nav{},不要使用简略或者特殊的字符串,否则可能三天后当你再读你的CSS代码时,就连你自己都搞不清一个样式到底是做什么用的!类别选择器就是CSS类,在HTML表现为调用的class。例如:(1)style.css文件中定义.title { margin:10px;padding:2px 5px;}(2)HTML文件中<p class="title"></p>在上述定义中,p标签将引用CSS文件中的title样式应用到整个p覆盖的范围。p将显示为一个上下左右margin各为10px,上下padding为2px,左右padding为5px的矩形。请注意类别选择器CSS定义和标记选择器的区别:在CSS文件中,标记选择器前边没有"."号,下面我们还会讲到ID选择器,它的定义也不一样,每个ID选择器样式前有一个"#"号,以确定其为ID选择器,而在HTML中则用ID="style"引用。值得注意的是,一个标签可以同时应用多个class选择器,如<h3 class="style1 style2"></h3>,具体大家可以在下边思考并做下实验,笔者在这就不举例了。3.ID选择器(1)ID选择器用法和class基本没有区别,他们的不同之处就在于ID选择器只能在HTML页中使用一次,而class则可以任意多次调用,在CSS文件中,ID 选择器一般写成#idname { bgcolor:#339;font-size:16px;}如果一个ID应用于多个HTML标记,则有可能造成IE编译错误,并且由于ID选择器可以被JAVASCRIPT等调用,所以多个ID会导致JAVA编译错误并崩溃!(2)HTML的引用在HTML中引用ID选择器的代码如下所示:<div id="name"></div>并且ID选择器不能像类别选择器那样同时被一个标签调用。这也是完全错误的语法。 复合选择器就是基本选择器通过不同的链接方式构成的。复合选择器就是两个或多个基本选择器,通过不同方式链接而成的选择器。