css中的一些常用选择器

css中的选择器

1.标签选择器，作用与当前页面所有匹配标签

这里以p标签为例：

   p{
      color: blue;
   }

< p>…</p>

2.类选择器，作用于当前页面所有class值为red的标签

例：
.red{
color: red;
}

<p class=”red”></p>

3.id选择器，作用于拥有唯一标识符id属性的标签

例：

#name{

color:green;

}

<p id=”name”></p>

4.伪类选择器

(1)默认链接状态

a:link{

color: yellow;

}

(2)已访问状态

a:visited{

color: darkgray;

}

(3)鼠标悬浮状态

a:hover{

color: red;

}

(4)鼠标点击时的状态

a:active{

color: orange;

}

</style>

5. 加空格后代选择器

6.加尖括号>，子代选择器

7. 并集选择器

#left，#right，#center{

height: 100px;

float: left;

}

8.通用选择器

注意：通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

* {

color: #f00;

}

转载于:https://www.cnblogs.com/liuyuancheng/p/7252646.html

css中的一些常用选择器相关推荐

[css] css中class和id选择器有什么区别？
[css] css中class和id选择器有什么区别? id 在部分浏览器的 js 中会直接生成同名变量: id 的唯一性,获取该 id 的 dom 时,会取同名 id 的前者: id 层叠权重非常高 ...
[css] 为什么说css中能用子代选择器的时候不要用后代选择器？
[css] 为什么说css中能用子代选择器的时候不要用后代选择器? 选择从右到左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级:减少匹配次数,提高效率个人简介我是 ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
css 中多个class选择器的详解
ml中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式<div class="contain ...
css中的伪类选择器有哪些
1 伪类选择器 ① 动态伪类选择器(5个) :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素. :active 选择 ...
CSS中的特殊的选择器
/*表示div盒子中的P标签*/ div P{} /*表示div盒子中除第一个P之外的都要添加样式*/ div p+p{} /*表示div盒子中从第三个p开始都要添加样式*/ 转载于:https:// ...
css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...

css中的一些常用选择器

css中的一些常用选择器相关推荐

最新文章

热门文章