id选择器的写作格式是什么？
div id="aa"..../div
在css里面定义如下：(名字前面加#，说明定义的是id)
#aa {
....
}
属于交换选择器的有哪些
选择器共有六种类型：
1.（元素）标签选择器
2.（类）class选择器
3.id选择器
4.后代选择器
5.子代选择器
6.交集选择器
例子：
器
1、标签选择器：给所有的同种标签制定标准
语法：标签名 {
key:value;
}
实例：div {
width:100px;
}
2、类名选择器:将标签归为一类来命名
一对多：一个类名可以多个标签使用
多对一：一个标签可以用多个类名
定义一个类名（class="类名"）
语法：.类名 {
key:value;
}
实例：.head {
width:100px;
}
使用类名（多个类名用空格隔开）
div class="head"/div
div class="类名 类名-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、 元素[属性] {}
找到某个元素，并且携带这个属性
div class/div
div/div
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只会给第一个设置属性
2、 元素[属性='属性值'] {}
找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)
div class/div
div class="box"/div
div class="box box2"/div
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只会给第二个设置属性
3、 元素[属性~='属性值'] {}
找到某个元素，且携带属性，并且属性值中包含指定的属性值
div class="box2"/div
div class="box box2"/div
div[class~='box2'] {
width: 300px;
height: 300px;
background: purple;
}
// 只要属性之中含有 box2就设置属性，给所有的div标签设置属性
4、 元素[属性|='前缀'] {}
找到元素，并且携带属性，并且属性值要以指定的形式: '前缀-xxxx'
div class="key box1 box2"/div
div class="key-box box1 box2"/div
div class="key-box2 box1 box2"/div
div[class|='key'] {
width: 50px;
height: 50px;
background: pink;
}
// 只给后面两个设置属性
5、 元素[属性^='前缀'] {}
找到元素，并且携带属性 ,并且属性值以'前缀'开头（属性中只有一个属性值）
div class="ax"/div
div class="baox"/div
div[class^='a'] {
width: 20px;
height: 20px;
background-color: #000;
}
// 只给第一个设置属性
6、元素[属性$='后缀'] {}
找到元素，并且携带属性 ,并且属性值以'后缀'结尾
div class="baox"/div
div class="axb"/div
div[class$='b'] {
width: 20px;
height: 20px;
background-color: blue;
}
// 只给第二个设置属性
7、 元素[属性*='中间'] {}
找到元素，并且携带属性 ,并且属性值中包含'中间'
div class="ax"/div
div class="axb"/div
div[class*='x'] {
width: 10px;
height: 10px;
background-color: palegreen;
}
// 两个都会设置属性
还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：
权重： 通配符标签选择器类名/伪类选择器ID选择器行内样式！important
本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！
image
©
著作权归作者所有,转载或内容合作请联系作者
点赞赚钻最高日赚数百
赞 (5)
敲键盘的那些年
小礼物走一走，来简书关注我
赞赏
下载简书，随时随地看好文
暂无评论
写评论
智慧如你，不想
发表一点想法
咩~
取消确认
推荐阅读
更多精彩内容
下载简书App
你也可以写文章赚赞赏
2016年5月Swift 2 学习 --- 117个注意事项与要点
Jenaral
App中阅读
233029h5常见的面试题
kismetajun
App中阅读
26362145面向对象的用电信息数据交换协议
庭说
App中阅读
9126613网络技术与应用
阿啊阿吖丁
App中阅读
264600css选择器的分类
败于化纤
App中阅读
8703css 伪类选择器
zhao_ran
App中阅读
67021408. 数组中的字符串匹配（难度：简单）
CSS语法的id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 # 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}#green {color:green;}下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
p id=red这个段落是红色。/pp id=green这个段落是绿色。/p注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。
css中使用id选择器，#A B #C{ ......} 是什么意思
#A B #C,
该多级选择器指代 #A包含B,B包含#C.
按照规范的话,该选择器 选择符是很冗余的,因为声明ID名称在整个页面中唯一,
#A B #C将等于#C的样式,换句话说#A B #C完全可以写成#C,然后定义C的样式.
多级选择器适用于局部选择,不合其他非匹配元素冲突.
多级选择器作用域只作用于最后一个匹配的选择符,#A B #C这里匹配#C,而前面的#A B只是为了选择到#C,不会影响#A和B的样式
分组选择器会影响各个组的样式:
#A B #C,#D E{
}
这样的,#C和E将获到相同样式.
类,元素,id三种选择器有什么区别和联系？
1.标签选择器
标签选择器中的“标签”指的是HTML标签，such as：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
h1 class="center"标题居中/h1
p class="center"段落居中。/p
/body
3.ID选择器
ID选择器为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是符号为井号（#），而不是英文圆点（.）。
ID选择器的名称是唯一的，即相同名称的id选择器在一个页面只能出现一次；
格式举例：
style
#para1
{
text-align:center;
color:red;
}
/style
/head
body
p id="para1"Hello World!!!/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元素的祖先列表：
请点击输入图片描述
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
