id选择器的格式(id选择器的写法是什么)

属于交换选择器的有哪些

选择器共有六种类型：

1.（元素）标签选择器

2.（类）class选择器

3.id选择器

4.后代选择器

5.子代选择器

6.交集选择器

例子：

器

1、标签选择器：给所有的同种标签制定标准

语法：标签名{

key:value;

}

实例：div{

width:100px;

}

2、类名选择器:将标签归为一类来命名

一对多：一个类名可以多个标签使用

多对一：一个标签可以用多个类名

定义一个类名（class="类名"）

语法：.类名{

key:value;

}

实例：.head{

width:100px;

}

使用类名（多个类名用空格隔开）

divclass="head"/div

divclass="类名类名-1类名-2"/div

3、ID选择器：唯一性只能给一个标签用同种ID名只能用一次

语法：#名字{

key:value;

}

实例：#foot{

width:100px;

}

4、包含选择器：从父元素里面找符合标准的子孙元素

先找到父元素再找到它的子孙元素从中筛选出符合条件的元素

用空格连接

语法：.类名/标签名.类名/标签名{

key:value;

}

实例：div.son{

width:100px;

}

5、子选择器：找到的只是子元素

先找到父元素再找到它的子元素从中筛选出符合条件的元素

语法：.类名/标签名.类名/标签名{

key:value;

}

实例：.fatherdiv{

width:100px;

}

6、全局选择器：通配符*（兼容性不太好）

语法：*{

key:value;

}

实例：*{

width:100px;

}

7、群组选择器（节省代码）

语法：标签名,标签名{

key:value;

}

实例：div,div{

width:100px;

}

8、相邻选择器:

找到指定元素的相邻的兄弟元素（只能找下方的相邻元素）

语法：.类名/标签名+.类名/标签名{

key:value;

}

实例：.a+div{

width:100px;

}

9、兄弟选择器（css3）:

找到指定元素的同级的所有兄弟元素（只能找下方的同级所有兄弟元素，并且为同种标签）

语法：.类名/标签名~.类名/标签名{

key:value;

}

实例：.a~div{

width:100px;

}

伪类选择器

1、:hover

指的是给指定元素加上鼠标悬停状态下的样式（该元素必须有宽高）

2、:active

指的是给指定元素加上鼠标激活状态下的样式

3、:after

指的是给指定元素后面添加一个伪元素必须携带content：""属性

4、：before

指的是给指定元素前面添加一个伪元素必须携带content:""属性

5、：focus

设置焦点（聚焦）状态

6、

（1）：first-child

指的是父元素下的第一个子元素

（2）：last-child

指的是父元素下的最后一个子元素

（3）：nth-child（n）n为几就是第几个子元素从前面开始指定

2n

3n

odd奇数

even偶数

（4）：nth-last-child（n）从后面开始指定

（5）：only-child只有一个子元素需加空格

（6）：empty没有子元素的没有任何文本不加空格

（7）：not（）取反（反选）

（8）：root根元素

（9）E：first-of-type

先找到元素E，再找到其中的第一个

（10）E：last-of-type

先找到元素E，再找到其中的最后一个

（11）E：only-of-type

先找到元素E，再找到其中的只有一个的

（12）E：nth-of-type（n）

先找到元素E，再找到其中的第n个

（13）E：nth-last-of-type（n）

先找到元素E，再找到其中倒数的第n个

（14）：first-letter/：last-letter（：：first-letter）

第一个字符/最后一个字符

（15）：first-line/：last-line（：：first-line）

第一个行/最后一个行

属性选择器

1、元素[属性]{}

找到某个元素，并且携带这个属性

divclass/div

div/div

div[class='box']{

width:200px;

height:200px;

background:green;

}

//只会给第一个设置属性

2、元素[属性='属性值']{}

找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)

divclass/div

divclass="box"/div

divclass="boxbox2"/div

div[class='box']{

width:200px;

height:200px;

background:green;

}

//只会给第二个设置属性

3、元素[属性~='属性值']{}

找到某个元素，且携带属性，并且属性值中包含指定的属性值

divclass="box2"/div

divclass="boxbox2"/div

div[class~='box2']{

width:300px;

height:300px;

background:purple;

}

//只要属性之中含有box2就设置属性，给所有的div标签设置属性

4、元素[属性|='前缀']{}

找到元素，并且携带属性，并且属性值要以指定的形式:'前缀-xxxx'

divclass="keybox1box2"/div

divclass="key-boxbox1box2"/div

divclass="key-box2box1box2"/div

div[class|='key']{

width:50px;

height:50px;

background:pink;

}

//只给后面两个设置属性

5、元素[属性^='前缀']{}

找到元素，并且携带属性,并且属性值以'前缀'开头（属性中只有一个属性值）

divclass="ax"/div

divclass="baox"/div

div[class^='a']{

width:20px;

height:20px;

background-color:#000;

}

//只给第一个设置属性

6、元素[属性$='后缀']{}

找到元素，并且携带属性,并且属性值以'后缀'结尾

divclass="baox"/div

divclass="axb"/div

div[class$='b']{

width:20px;

height:20px;

background-color:blue;

}

//只给第二个设置属性

7、元素[属性*='中间']{}

找到元素，并且携带属性,并且属性值中包含'中间'

divclass="ax"/div

divclass="axb"/div

div[class*='x']{

width:10px;

height:10px;

background-color:palegreen;

}

//两个都会设置属性

还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：

权重：通配符标签选择器类名/伪类选择器ID选择器行内样式！important

本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！

image

?

著作权归作者所有,转载或内容合作请联系作者

点赞赚钻最高日赚数百

赞(5)

敲键盘的那些年

小礼物走一走，来简书关注我

赞赏

下载简书，随时随地看好文

暂无评论

写评论

智慧如你，不想

发表一点想法

咩~

取消确认

推荐阅读

更多精彩内容

下载简书App

你也可以写文章赚赞赏

2016年5月Swift2学习---117个注意事项与要点

Jenaral

App中阅读

233029h5常见的面试题

kismetajun

App中阅读

26362145面向对象的用电信息数据交换协议

庭说

App中阅读

9126613网络技术与应用

阿啊阿吖丁

App中阅读

264600css选择器的分类

败于化纤

App中阅读

8703css伪类选择器

zhao_ran

App中阅读

67021408.数组中的字符串匹配（难度：简单）

id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以#来定义。

下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red{color:red;}#green{color:green;}下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

pid=red这个段落是红色。/ppid=green这个段落是绿色。/p注意：id属性只能在每个HTML文档中出现一次。想知道原因吗，请参阅XHTML:网站重构。

#AB#C,

该多级选择器指代#A包含B,B包含#C.

按照规范的话,该选择器选择符是很冗余的,因为声明ID名称在整个页面中唯一,

#AB#C将等于#C的样式,换句话说#AB#C完全可以写成#C,然后定义C的样式.

多级选择器适用于局部选择,不合其他非匹配元素冲突.

多级选择器作用域只作用于最后一个匹配的选择符,#AB#C这里匹配#C,而前面的#AB只是为了选择到#C,不会影响#A和B的样式

分组选择器会影响各个组的样式:

#AB#C,#DE{

}

这样的,#C和E将获到相同样式.

1.标签选择器

标签选择器中的“标签”指的是HTML标签，suchas：a、span、div、p、li、img等。

格式举例：

div{backgroud-color:red;font-size:16px;}

div.../div//就会按标签里写的格式显示

2.类选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。

格式举例：

style

.center

{

text-align:center;

}

/style

/head

body

h1class="center"标题居中/h1

pclass="center"段落居中。/p

/body

3.ID选择器

ID选择器为标签设置id="ID名称"，而不是class="类名称"。

ID选择符的前面是符号为井号（#），而不是英文圆点（.）。

ID选择器的名称是唯一的，即相同名称的id选择器在一个页面只能出现一次；

格式举例：

style

#para1

{

text-align:center;

color:red;

}

/style

/head

body

pid="para1"HelloWorld!!!/p

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

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

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

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

后代选择器：用空格隔开

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

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

举例：

styletype="text/css"

p{

font-size:14px;

}

/style

body

pcss/p

/body

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

代码如下：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

styletype="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

styletype="text/css"

#mytitle

{

border:3pxdashedgreen;

}

/style

/head

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

body

h2id="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中用.来表示类。举例如下：

styletype="text/css"

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

width:800px;

}

/style

/head

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

body

h2class="oneclass"你好/h2

/body

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

class属性的特点：

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

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

h3class="classone?classtwo"我是一个h3啊/h3

而不能写成：

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

类选择器使用的举例：

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

应该注意：

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

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

如：

styletype="text/css"

.lv{

color:green;

}

.da{

font-size:30px;

}

.underline{

text-decoration:underline;

}

/style

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

pclass="lvda"段落1/p

pclass="lvxian"段落2/p

pclass="daxian"段落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、后代选择器:定义的时候用空格隔开

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

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

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

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

举例1：

styletype="text/css"

.div1p{

color:red;

}

/style

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

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

举例：

styletype="text/css"

h3bi{

color:red;

}

/style

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

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

效果：

请点击输入图片描述

或者还有下面这种写法：