CSS样式选择器

简介: 一直听说各种选择器,今天借这篇文章总结一下CSS的样式选择器;

  一直听说各种选择器,今天借这篇文章总结一下CSS的样式选择器;


一、什么是选择器:

  对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合于哪些元素;



二、类型:


Class选择器:给样式定义一个名字,在元素中引用Class——前面点 .

  ID选择器:样式针对某个ID的元素;

  标签选择器:设置适应于某些类型的标签;


三、使用:


1、Class,元素主动找样式;

定义几种样式,我们自己用的时候去选择;



20161120201217541.png

效果图


20161120201253732.png

Class+标签选择器:

   inputlabelclass name 都为accoutno,但是不同的控件面对相同的类,样式不一样

20161120201518392.png


2id选择器:针对某种控件:

 

  为指定的ID元素设定样式,id前加# ,就像一个人的身份证,一个人只能有一个ID


20161120201601653.png20161120201658332.png


3、标签选择器:针对某个标签


ID选择器可以设置范围比较小的类型,比如,一个标签的范围太大,在一个标签内的内容可以细化到一个ID,再单独设置类型。




  更多关于选择器的内容,可参考链接:

http://blog.csdn.net/cui_angel/article/details/7673076


四、总结:


class选择器:对一个大类。可以将标签选择器,ID选择器包含进来。

标签选择器:为整个项目中的标签设置样式;

ID选择器:更有针对性;  














相关文章
|
4月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
5月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
66 1
|
5月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
75 1
|
2月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
|
前端开发 JavaScript UED
|
3月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
81 2
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
474 1
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
119 2
|
3月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。

热门文章

最新文章