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选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
8 2
|
1天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
7 1
|
1天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
10 1
|
9天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
16 1
|
11天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
17 1
|
15天前
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
23 0
|
15天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
16天前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
17天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
21 1
|
17天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性