Dotcpp  >  编程教程  >  CSS语法  >  CSS选择符

CSS选择符

点击打开在线编译器,边学边练

CSS:是Cascading Style Sheet的缩写,译作【层叠样式表单】,是一组格式设置规则。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS的组成:CSS的定义是由三个部分组构成:选择符(Selector),属性(properties)和属性的取值(value)。语法:selector{proprety:value}(选择符{属性:属性值})

注意事项:

1. CSS声明块由:选择符+“{”+1个或者多个CSS属性+“}”组成。

2. CSS是大小写不敏感的,在CSS语法中推荐使用小写。


一、CSS选择符

是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS。怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式。


二、选择符语法

一个CSS选择符就定义了一个样式。

选择符名称{声明;}

比如:

p
{font-size:12px;}
.dreamdublue
{color:blue;}
.dreamdu18px
{font-size:18px;}
#dreamdured
{color:red;}

P、dreamdublue、dreamdured都是选择符。


三、选择符命名规则

CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号。

(1)英文字母大写与小写 A-Z a-z

(2)数字 0-9

(3)连字号 -

(4)下划线 _

(5)冒号 :

(6)句号 .

注意事项:CSS选择符只能以字母开头。


四、选择符分类

CSS选择符可以分为很多类,比如:类型选择符,id选择符,class选择符,通用选择符,分组选择符,包含选择符,元素指定选择符,子对象选择符,属性选择符,相邻选择符等,以下将一一介绍分析。

1. 类型选择符:类型选择符就是网页元素本身,定义时直接使用元素名称。

Body{
/*定义页面属性*/
}
Div{
Width:774px ; /*把所有的div元素定义为宽度为774像素*/
}

2. id选择符:它是唯一的,不同元素的id值是不能重复的,id选择符为每个元素的具体对象定义不同的样式,方便用户更加精细的控制页面。使用id选择符时要先为每个元素定义一个id属性。

<div id=”top”></div>
使用id选择符时,需要使用到#进行标识:
#top{
Width:774px ; /*把所有的div元素定义为宽度为774像素*/
}

3. class选择符:在一个文档中可以为不同类型的元素定义相同的类名,class可以实现把相同样式的元素统一为一类,使用class选择符时要先为每个元素定义一个class属性:

<div class=”red”></div>
<span class=”red”></span>
<p class=”red”></p>
使用class选择符时,需要使用英文.(点)进行标识:
.red{
Color:red ;
}

4. 通用选择符:是一种特殊的选择符,它用*表示,是一个使用但又容易忽略的选择符。

*{
font-size:12pt;/*定义文档中所有字体大小为12pt*/
}

5. 分组选择符:分组选择符不是一种选择符类型,而是一种选择符方法。当多个对象定义了相同的样式时,我们可以把他们分为一组。这样能够简化代码读写,比如:

.class1{
font-size:13px;
color:red;
text-decraotian:underline;
}
.class2{
font-size:13px;
color:blue;
text-decroation:underline;
}

可以分组为:

.class1,class2{
font-size:13px;
text-decroation:underline;
}
.class1{
color:red;
}
.class2{
color:blue;
}

使用分组有2原则:1.方面原则;2.就近原则(如果几个元素相邻,在一个模块内可以考虑使用分组选择符)

6. 包含选择符:最有用的一类选择符,它能够简化代码,实现大范围的样式控制。比如:

.div1 h2{
/*定义类div1层中所有h2的标题样式*/
font-size:18px;
}
.div1 p{
/*定义类div1层中所有p的标题样式*/
font-size:12px;
}

7. 元素指定选择符:有时候我们希望控制某种元素在一定范围内对象的样式,这时可以把class或id选择符组合起来使用。比如:

span.red{
/*定义span元素中class为red的元素颜色为红色*/
color:red;
}
div#top{
/*定义div元素中id为top的元素宽度为100%*/
width:100%;
}
eg:
<div>
<h2><h2>
<p></p>
<span></span>
</div>

在上面代码中要使用news选择符很显然不行,直接使用P,h2类型选择符也不太好这时便可以使用元素指定选择符

p.news{}  h2.news{}  span.news{}

8. 子对象选择符:与元素选择符一样都是限制选择符,即在一定元素范围内定义符合限制条件的元素样式,元素制定选择符是用class和id属性作为限制条件的,而子对象选择符是用id和子对象作为限制条件的。

#main > table{/*定义id为main的主体模块中子对象table的样式*/
width:788px;
font-size:12px;
}
#main > .title{/*定义id为main的主体模块中子对象的class为title的样式*/
color:red;
font-style:italic;
}

9. 属性选择符:属性选择符是在元素后面加一个中括号,中括号中列出各种属性,或者表达式。属性选择符存在7种具体形式:

(1)存在属性匹配:通过匹配存在的属性来控制元素的样式,一般要把匹配的属性包含在中括号中,只列举姓名并不赋值:

h1[class]{
color:red;/*作用任何带class属性的h1元素 不管class的值是什么*/
}
img[alt]{
border:none;/*作用任何带alt属性的img元素 不管alt的值是什么*/
}
a[href][title]{
font-weight:bold;/*作用同时带href和title属性的a元素*/
}

(2)精准属性匹配:只有当属性值完全匹配指定的属性值时才会应用样式,id和class选择符实际上就是精准属性选择。

a[href = "www.163.com"][title="网易"]{
font-size:12px;/*作用地址指向www.163.com并且title提示字样为"网易"的a元素*/
}

(3)空白分个匹配:通过为属性定义字符串列表,然后只要匹配其中任意一个字符串即可控制元素样式。

<span class = "a b c">谁来控制我的样式</span>
可以使用下面样式来控制:
[class^="a"]{
color:red;
}或:
[class^="b"]{
color:red;
}或:
[class^="c"]{
color:red;
}或:
span[class^="c"]{
color:red;
}

(4)连字符匹配:与空白匹配的功能和用法相同,但是连字符匹配中的字符串列表中用连字符进行分割.

<span>谁来控制我的样式</span>

可以使用下面样式来控制:

[class|="a"]{
color:red;
}或:
[class|="a"]{
color:red;
}或:
[class|="b"]{
color:red;
}或:
[class|="c"]{
color:red;
}或:
span[class|="c"]{
color:red;
}

(5)前缀选择符:只要属性值的开始字符匹配指定字符串,即可对元素应用样式。前缀匹配使用[^=]形式来实现:

<div>前缀匹配</div>

可使用如下样式控制

[class ^="my"]{
color:red;
}

(6)后缀匹配:与前缀相反,只要属性的结尾字符匹配指定字符,使用[$=]形式控制。

<div>后缀匹配</div>

可使用如下样式控制

[class $="Test"]{
color:red;
}

(7)子字符串匹配:只要属性中存在指定字符串即应用样式,使用[*=]形式控制。

<div>子字符串匹配</div>

可使用如下样式控制

[class *="est"]{
color:red;
}

10. 相邻选择符:就是指元素相邻的下一个元素。

div+p{
font-size:24px;/*作用所有紧贴div元素之后的p元素,定义p元素的字体大小为14px*/
}
eg:
<div id = "wrap">
<div id = "sub_wrap">
<h1></h1>
<p></p>
</div>
<p></p>
</div>

要单独控制最下的p元素除非为他定义一个class和id属性如果使用使用相邻选择符就可以做到

#sub_wrap+p{
font-size:14px;
}

本文固定URL:https://www.dotcpp.com/course/1126

CSS教程
第一章 CSS简介
第二章 CSS语法
Dotcpp在线编译      (登录可减少运行等待时间)