标签选择器:

div{

font-size=10px;

color=red;

background-color=yello;

width=200px;

height=200px;

}

<div>前端威武</div>

---------------------------------------

类选择器:

.box{

}

<p class="box">啊啊啊啊</p>

------------------------------------------

ID选择器:

#box{

}

<p id="box">啊啊啊<p>

-------------------------------------------

通配符选择器

*{

}

<div>aa</div>

<p>aaa</p>

---------------------------------

复合选择器:两个或两个以上的选择器通过不同方式连接起来

div.box{//无空格

color:red;

}

<div class="box">哎哎</div>//这个div里的box变红色

<p class="box">aaa<p>

<div>aaaaaa</div>

-------------------------------

后代选择器:有空格    无限制隔代

选择器+空格+选择器.....{

}

.box san{

cocor:red;

}

<div class="box">

<p><span class="miss">aa</span></p>

</div>

----------------------------------

子代选择器:

div>span{

color;red;

}

<div>

<p><span></span></p>//这里的span是孙子 这里是p>span

<span></span> //直接的子标签变了就是这个

------------------------------------------------------------------------

并集选择器:

div,p,span{

font-size:100px;

}

<div>aaa</div>

<p>aaa</p>

<span>aaaa</span>

------------------------------------

选择器优先级:

一、什么是css优先级
css优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、css优先级规则
比较简单易记的一种方法就是给不同选择器分配不同的值:
1.id选择器默认优先级最高,其权值为100
2.class选择器、属性选择器和伪类选择器的权值为10
3.标签选择器的优先级较低,其权值为1
所以在比较样式的优先级时,只需统计选择符中的id、class、标签名个数,然后把对应的权值相加即可。根据结果便可得出优先级高低。
1.结果较大的优先级较高
2.结果相同,则后定义的样式优先级较高
3.如果样式值中含有!important,则该值优先级最高

CSS选择器-常用搜集的更多相关文章

  1. html5--6-11 CSS选择器7--伪类选择器

    html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...

  2. html5--6-10 CSS选择器7--伪类选择器

    html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...

  3. html5--6-9 CSS选择器6--伪类选择器

    html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...

  4. html5--6-8 CSS选择器5

    html5--6-8 CSS选择器5 实例 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  5. html5--6-7 CSS选择器4

    html5--6-7 CSS选择器4 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  6. html5--6-6 CSS选择器3

    html5--6-6 CSS选择器3 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  7. html5--6-5 CSS选择器2

    html5--6-5 CSS选择器2 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  8. html5--6-4 CSS选择器

    html5--6-4 CSS选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用 ...

  9. CSS选择器使用

    今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697) CS ...

随机推荐

  1. 关于jsonp跨域的 实现

    1.实现原理    1.把接口写在 script标签的src 中 这个接口就可以访问(不会存在跨域问题  因为接口在浏览器地址栏是可以访问的  会返回json字符串); 2.直接写不可以  因为正常情 ...

  2. 《英文版c++语言程序设计》

    compatibility [kəm,pætɪ'bɪlɪtɪ] n.兼容 compatible [kəm'pætɪb(ə)l] adj. 兼容的:能共处的:可并立的 interdependent [ɪ ...

  3. “Hello World!”团队第六周的第一次会议

    今天是我们团队“Hello World!”团队第六周召开的第一次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.Todo List 六.会议照片 七.燃尽图 一.会议时间 ...

  4. Spring Boot 学习笔记 - 01

    看了[纯洁的微笑]的博客后,我决定开始学好 Spring 体系了,真的是解决了饥渴的我.

  5. 【移动端debug-2】Flexbox在移动端的兼容实践

    最近在项目中用到了flexbox,总结一下使用心得. 一.什么是flexbox,干嘛使的? 曾几何时,我们特别希望能像word一样,在排版时有个分散对齐选项(平均分配子元素宽度)这样我就可以任意在父元 ...

  6. bzoj1061-[Noi2008]志愿者招募-单纯形 & 费用流

    有\(n\)天,\(m\)类志愿者,一个第\(i\)类志愿者可以从第\(s_i\)天工作到第\(t_i\)天,第\(i\)天工作的志愿者不少于\(b_i\)个.每一类志愿者都有单价\(c_i\),问满 ...

  7. wp开发(二)--获取用户篇

    本文从个人开发者的角度来谈如何让wp应用获得尽可能多的用户.当然前提是你的app有一定的竞争性,如果不具备竞争力,那再多的用户下载也是白扯,所以最关键的还是要保证app的质量. 一. 程序图标 千万不 ...

  8. React安装React Devtools调试工具

    在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具. Download the React DevTools for a better development ...

  9. 【Java】关于@RequestBody

    首先@RequestBody需要接的参数是一个string化的json,这里直接使用JSON.stringify(json)这个方法来转化 其次@RequestBody,从名称上来看也就是说要读取的数 ...

  10. @Resource 和 @Autowired 区别

    spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@PostConstruct以及@PreDestroy. @Resour ...