css中的选择器有哪些

本文将为大家详细介绍“css中的选择器有哪些”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“css中的选择器有哪些”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

10年积累的成都网站制作、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站后付款的网站建设流程,更有旌阳免费网站建设让你可以放心的选择与我们合作。

1.选择符(器)使用基本语法

选择符{属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

…..:…….;

}

2.标记选择器(直接使用HTML标签做选择器)

second.html

标记选择器

标记选择器(直接使用html标签做选择器)

second.css

p{

font-size:34px;

text-align:left;

text-transform:uppercase;

font-family:黑体,宋体;

text-indent:3em;

text-decoration:line-through;

font-weight:bolder;

letter-spacing:0.5em;

line-height:3px;

margin:34px;

padding:23px;

}

3.类选择器(为每一个标签设置一个类名,CSS可通过类名为标签设置样式,不同标签类名可以相同,相同可以共用同一个样式)-CSS中用标签名.类名或者.类名表示

second.html

类选择器

类选择器(为每一个标签设置一个类名,CSS可通过类名为标签设置样式,不同标签类名可以相同,

相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示

second.css

.text{

font-variant:small-caps;/*小型大写字母*/

font-family:宋体,黑体;

font-style:italic;

text-transform:lowercase;

font-size:35px;

text-indent:3em;

text-decoration:overline;

font-weight:bold;

letter-spacing:1px;

line-height:3em;

font-variant:small-caps;

text-align:right;

}

4.ID选择器(为每一个HTML标签设置一个唯一的ID,CSS可以通过id来为标签设置样式)

—-CSS中用#id值{}来表示

second.html

ID选择器

ID选择器(为每一个HTML标签设置一个唯一的ID,CSS可以通过id来为标签设置样式)

----CSS中用#id值{}来表示

second.css

.text{

font-variant:small-caps;/*小型大写字母*/

font-family:宋体,黑体;

font-style:italic;

text-transform:lowercase;

font-size:35px;

text-indent:3em;

text-decoration:overline;

}

#textp1{

font-weight:bold;

letter-spacing:1px;

line-height:3em;

font-variant:small-caps;

text-align:right;

}

5.包含选择器(后代选择器:可跨代,跨标签):在一个标签里包含另一个标签

second.html

包含选择器

ID选择器

(为每一个html标签设置一个唯一的ID,CSS可以通过id来为标签设置样式)

----CSS中用#id值{}来表示

second.css

pa{

text-decoration:none;

font-size:25px;

background-color:pink;

}

.text{

font-size:21px;

font-style:normal;

text-transform:lowercase;

text-indent:3em;

font-weight:bold;

letter-spacing:0.7em;

line-height:27px;

}

6.子选择符(IE浏览器不支持):中间不能包含其他标签;CSS中用标签1>标签2(子标签)表示

second.html

子选择器

子选择器

(IE浏览器不支持):中间不能包含其他标签;CSS中标签1>标签2(子标签)表示

second.css

p>a{

text-decoration:none;

font-family:黑体,宋体;

}

p{

font-size:23px;

}

7.相邻选择器:(CSS样式作用在最后一个标签)常用设置表格的列属性–CSS用标签1+….标签n表示

second.html

相邻选择器

子选择器:

(IE浏览器不支持):中间不能包含其他标签;CSS中标签1>标签2(子标签)表示

相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示

second.css

.text+.text1{

color:pink;

background-color:gray;

font-size:34px;

}

8.并集选择器:多个标签一起设置样式,用逗号隔开

second.css

并集选择器

子选择器:

(IE浏览器不支持):中间不能包含其他标签;CSS中标签1>标签2(子标签)表示

并集选择器:多个标签一起设置样式,用逗号隔开

second.css

.text,.text1{

color:pink;

background-color:gray;

font-size:34px;}

9.伪类(元素某一种状态,常用于描述超链接的状态:link(未访问状态);visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)CSS用标签名:状态表示

second.html

伪类

伪类

second.css

a:link{

color:blue;

font-size:53px;

text-decoration:none;

}

a:visited{

color:red;

font-size:193px;

}

a:hover{

color:green;

font-size:73px;

}

a:active{

color:gray;

font-size:183px;

}

10.伪元素(某个对象中某个元素的状态)CSS中用标签名:伪类表示

常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])

second.html

伪类

伪元素(某个对象中某个元素的状态)CSS中用标签名:

伪元素常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])


伪元素(某个对象中某个元素的状态)CSS中用标签名:

伪元素常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])

second.css

p:first-letter{

font-size:200%;

}

p:first-line{

color:red;

}

11样式优先级:内联选择器>ID选择器>类选择器(伪类,属性)>标记选择器

可以用!important;加大优先级

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

感谢您能读到这里,小编希望您对“css中的选择器有哪些”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联行业资讯频道!


网页名称:css中的选择器有哪些
本文URL:http://scyanting.com/article/ppcsss.html