tofacebook.com -专业IT技术社区 html类选择器 Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
133°

html类选择器 Web程序【tofacebook.com】

标签:link   属性   语法   gre   通配符选择器   签名   visit   ...   优先级   

选择器: 选择标签的,选择出标签以后给标签加样式

常用的选择器6+1种


一.标签选择器

语法:

标签名 {

样式规则
}


例如:

p {
样式规则
}

作用: 所有的p标签被选中 套用后面的样式

 

二.id选择器

1.语法

#id名 {
样式规则
}

例如:

#myId1 {
样式规则
}


作用: id值为myId1的元素会被选中,套用后面的样式

2.使用


<p id="myId1"></p>


三.类选择器

如果想把同一个样式,给多个元素使用 需要使用类选择器

1. 不带标签名的

语法:

.类名 {

}

例如:

.myClass1 {

样式规则
}

作用: class属性为myClass1的所有标签被选中


使用

<p class="myClass1">我是p标签</p>


2.带标签名

标签名.类名 {

}


例如:

p.myClass1 {
样式规则
}

四.组合选择器

选择器1,选择器2,...选择器n {

样式规则
}

选择器1、选择器2...选择器n 所有的选择器 选用的元素都会套用后面的样式


解决了代码冗余问题


五.通配符选择器

* {

}

作用: 该页面中所有的元素都会被选中,套用后面的样式


六.子代选择器和后代选择器

1. 子代

儿子节点

p>div {
样式规则
}

#myId1>.myClass{

}


2.后代选择器

后代: 儿子和子孙节点....

p div{


}

 

*************************注释*********************************

CSS没有单行注释一说 所有的注释 都是/**/


*******************************1 伪类*************************************

前6种选择器 都是作用在标签上

伪类: 不是作用在标签上的,作用在标签的某个具体的属性上....

超链接的伪类

1. 未访问时的状态

a:link {
color: green;
text-decoration: none;;
}

2. 访问后的状态

a:visited {
color:pink;
text-decoration: none;;
}

3. 鼠标悬停

a:hover {
color:red;
font-size:30px;
text-decoration: none;;
}


4. 激活状态(从点击鼠标左键开始 到松开左键之间的状态)

a:active {
color:blue;
text-decoration: none;;

}

 

****************************面试题:如何给一个标签套用多个类选择器? ***********************************


<style type="text/css">


.myClass2 {
font-size:30px;

color:green;
}

.myClass1 {
background-color:#000000;
color:red;/*CSS文件中 后定义的优先*/

}


</style>

<p class="myClass1 myClass2"></p>


如果两个样式中定义了相同的属性color, 哪个起作用??


CSS文件中 后定义的优先, 而不是看class属性后定义的...

 

****************************选择器的优先级***********************************


id>类选择器>标签选择器

 

html类选择器

标签:link   属性   语法   gre   通配符选择器   签名   visit   ...   优先级   

原文地址:https://www.cnblogs.com/MrTanJunCai/p/9907555.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: