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选择器:更有针对性;  














相关文章
|
1月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
42 1
|
2月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
49 1
|
19天前
|
前端开发 JavaScript UED
|
25天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
33 2
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
183 1
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
56 2
|
25天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
|
25天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
25天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。