热心网友
回答时间：2024-09-12 21:16
divid="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;
}
使用类名（多个类名用空格隔开）
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.数组中的字符串匹配（难度：简单）
CSS语法的id选择器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:网站重构。
css中使用id选择器，#AB#C{......}是什么意思#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将获到相同样式.
类,元素,id三种选择器有什么区别和联系？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的常用选择器类型有哪些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标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
效果：
请点击输入图片描述
或者还有下面这种写法：
本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。
