网站建设资讯

NEWS

网站建设资讯

css三种样式选择器,css类型选择器

css样式有哪几种选择器?

CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。

成都创新互联是一家集网站建设,绿春企业网站建设,绿春品牌网站建设,网站定制,绿春网站建设报价,网络营销,网络优化,绿春网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

用法如下:

#id名 { 属性名:属性值; }

.class名 { 属性名:属性值; }

标签名 { 属性名:属性值; }

其中,他们之间又可以以不同的方式进行组合,如下:

后代选择器: 父代名 后代名 { 属性名:属性值; }

子代选择器: 父代名子代名 { 属性名:属性值; }

群组选择器: #name1, .name2, #name div { 属性名:属性值; }

伪类选择器: name:伪类

通用(通配符)选择器: * { 属性名: 属性值; }……

常用的也就这些。

纯手打,望采纳。我的百度个人简介里面还有博客网址,想看一些我资料欢迎进入我的博客。

请简要说明css样式表中三种选择器(三种样式)的特点

CSS选择器的类型分为3类:标记选择器、类别选择器和ID选择器。(可能名称有不同的说法,但意思都是一样的)

标记选择器是利用HTML的标记直接定义标记内容的样式,如:h1{

color:red;

font-size:25pt;}

类别选择器是通常说的class选择器,定义的时候要在名称前加.如:.one{

color:red;

font-size:25pt;}

ID选择器定义的时候要在前面加#,如:#box

{

color:red;

font-size:25pt;}

利用DW写CSS的时候,高级就是上面说的ID选择器,ID选择器的名字可以任意命名,可以自己定义,可是标签就只能是HTML语言里制定的那些标记,不能自己定义。

css3的选择器有哪些?

css3选择器如下:

一、通配符选择器(*)

通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。

二、元素选择器(E)

元素选择器,是css选择器中最常见而且最基本的选择器。

三、类选择器(.className)

类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名

四、id选择器(#ID)

ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),

五、后代选择器(E F)

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E 

F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。

六、子元素选择器(Egt;F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中Egt;F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E 

F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E gt; F,其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

css有哪三大基本选择器

1、标签选择器

p{color:red;}

什么是标签选择器?

根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性

注意点:

标签选择器选中的是当前界面所有同名标签,不能单独选中

只要是HTML中的标签都可以作为标签选择器

2、id选择器

#id{color:red;}

什么是id选择器?

根据指定标签的id,在当前界面中找到该id的标签,并设置属性

注意点:

每个HTML标签都有id属性

同一个界面中id是唯一的,不能重复

编写id选择器必须要在id前面加上一个#号

id的名称有一定的规范,只能由字母数字和下划线组成

id的名称不能够以数字开头

id的名称不能与HTML标签同名

如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的

3、类选择器

.class{color:red;}

什么是类选择器?

根据指定标签的类,在当前界面中找到该类的标签,并设置属性

注意点

每个HTML标签都有class属性

同一个界面中class属性是可以重复

编写class选择器必须要在class名称前面加上一个.号

class的名称有一定的规范,只能由字母数字和下划线组成

class的名称不能够以数字开头

class的名称不能与HTML标签同名

class就是专门给某一类标签设置样式的

一个标签可以同时绑定多个class属性

p class="p1 p2 p3"Test paragraph/p,这样就绑定了三个类属性

类选择器实践,通过对不同类的组合来实现不同的效果

详细说明css的常用选择器类型有哪些

css常用的四种选择器类型有:

标签选择器:针对一类标签

ID选择器:针对某一个特定的标签使用

类选择器:针对你想要的所有标签使用

后代选择器:用空格隔开

1、标签选择器:选择器的名字代表html页面上的标签

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。

举例:

style type="text/css"

p{

font-size:14px;

}

/style

body

pcss/p

/body

再比如说,想让“学完了安卓,继续学前端哟”这句话中的“前端”两个变为红色字体,那么可以用span标签把“前端”这两个字围起来,然后给span标签加一个标签选择器。

代码如下:

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

style type="text/css"

span{

color: red;

}

/style

/head

body

p学完了安卓,继续学span前端/span哟/p

/body

/html

【总结】需要注意的是:

(1)所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等。

(2)无论这个标签藏的多深,一定能够被选择上。

(3)选择的所有,而不是一个。

2、ID选择器:规定用#来定义(名字自定义)

针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。

举例:

head

titleDocument/title

style type="text/css"

#mytitle

{

border:3px dashed green;

}

/style

/head

然后在别处使用id来引用它:

body

h2 id="mytitle"你好/h2

/body

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字,可以任取,但是:

(1)只能有字母、数字、下划线。

(2)必须以字母开头。

(3)不能和标签同名。比如id不能叫做body、img、a。

(4)大小写严格区分,也就是说aa,和AA是两个不同的ID

另外,特别强调的是:HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!

一个标签可以被多个css选择器选择:

比如,可以同时让标签选择器和id选择器作用于同一个标签。(用到了层叠)如下:

请点击输入图片描述

然后通过网页的审查元素看一下效果:

请点击输入图片描述

现在,假设选择器冲突了,比如id选择器说这个文字是红色的,标签选择器说这个文字是绿色的。那么听谁的?

实际上,css有着非常严格的计算公式,能够处理冲突.

一个标签可以被多个css选择器选择,共同作用,这就是“层叠式”的第一层含义

3、类选择器:规定用圆点.来定义

类选择器. 针对想要的所有标签使用。优点:灵活。

css中用.来表示类。举例如下:

style type="text/css"

.oneclass/*定义类选择器*/{

width:800px;

}

/style

/head

然后在别处使用class来引用它:

body

h2 class="oneclass"你好/h2

/body

和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点:

特性1:类选择器可以被多种标签使用。

特性2:同一个标签可以使用多个类选择器。用空格隔开。举例如下

h3 class="classone  classtwo"我是一个h3啊/h3

而不能写成:

h3 class="teshu" class="zhongyao"我是一个h3啊/h3

类选择器使用的举例:

类选择器的使用,能够决定一个人的css水平。

应该注意:

(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。

(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

如:

style type="text/css"

.lv{

color: green;

}

.da{

font-size: 30px;

}

.underline{

text-decoration: underline;

}

/style

然后让每个标签去选取自己想要用的类选择器:

p class="lv da"段落1/p

p class="lv xian"段落2/p

p class="da xian"段落3/p

问题:到底用id还是用class?

答案:尽可能的用class,除非极特殊的情况可以用id。

原因:id是js用的。也就是说,js要通过id属性得到标签,所以css层面尽量不用id,要不然js就很别扭。另一层面,会认为一个有id的元素,有动态效果。

举例如下:

请点击输入图片描述

上图所示,css和js都在用同一个id,会出现不好沟通的情况。

记住这句话:类上样式,id上行为。意思是说,class属性交给css使用,id属性交给js使用。

上面这三种选择器的区别:

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个),ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

4、后代选择器: 定义的时候用空格隔开

对于E F这种格式,表示所有属于E元素后代的F元素,有这个样式。空格就表示后代。

后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

后代选择器,描述的是祖先结构。

看定义可能有点难理解,我们来看例子吧。

举例1:

style type="text/css"

.div1 p{

color:red;

}

/style

空格就表示后代。.div1 p 表示.div1的后代所有的p。

这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。

举例:

style type="text/css"

h3 b i{

color:red ;

}

/style

上方代码的意思是说:定义了h3标签中的b标签中的i标签的样式。

同理:h3和b和i标签不一定是连续紧挨着的,只要保持一个后代的关联即可。

效果:

请点击输入图片描述

或者还有下面这种写法:

请点击输入图片描述

上面的这种写法,h3标签和i标签并不是紧挨着的,但他们保持着一种后代关系。

还有下面这种写法:(含类选择器、id选择器都是可以的)

请点击输入图片描述

在开头说了:后代选择器,描述的是一种祖先结构。举个例子来说明这句话:

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

style type="text/css"

   div div p{

       color: red;

   }

   .div2{...}

   .div3{...}

   .div4{...}

/style

/head

body

div

   div

       div

           div

               p我是什么颜色?/p

           /div

       /div

   /div

/div

/body

/html

上面css中的div div p,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表:

请点击输入图片描述


文章标题:css三种样式选择器,css类型选择器
文章起源:http://njwzjz.com/article/hosejs.html