2016.9.21 CSS选择器

1.CSS选择器常见的有几种?

  • id选择器

  • 类选择器

  • 属性选择器:以某个元素的属性作为选择依据
    input[type="text"] 用于调整输入框的样式
    input[type="button"] 用于调整按钮的样式

  • 分组选择器:可以对选择器分组,相当于同时选中两个元素,用逗号隔开.
    h1, .p1{ color: red; } hi 和class=p1的类同时被选中.

  • 派生选择器:选择某个元素下的子元素,通常用于作用域隔离分为两种:
    h1 p1{} h1中的所p1标签
    h1>p1{} 选中p1 但不包括p1中的其他元素

  • 伪类选择器
    一般用于向选择器添加特殊效果.
    先来说一下语法:
    E:pseudo-class {property:value}
    其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值
    其中,伪类一般应用在两个地方:

  • 动态伪类:因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,分为两种
    1 锚点

     demo a:link {color:gray;}  链接没有被访问时前景色为灰色
     demo a:visited{color:yellow;}  链接被访问过后前景色为黄色  
     demo a:hover{color:green;}  鼠标悬浮在链接上时前景色为绿
     demo a:active{color:blue;}  鼠标点中激活链接那一下前景色为蓝色  
    

2 用户行为伪类
:hover用于当用户把鼠标移动到元素上面时的效果;
:active
用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
:focus**用于元素成为焦点,这个经常用在表单元素上。

  • UI元素状态伪类:这些主要是针对于HTML中的Form元素操作.
    input[type="text"]:disabled{} 作用在于对想要禁止的输入框添加其他效果便于区别
    input[type="radio"]:checked 表示页面上所有选中的radio按钮

2.选择器的优先级是怎样的?

优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
优先级强度由高到低:
!important规则>元素的内联样式<style="">>ID选择器>类选择器,属性选择器,伪类选择器>元素类型选择器,伪元素选择器.
注意!

  • 通用选择器)(*), 和 否定伪类:not() 不会影响优先级(但是,在:not()内部声明的选择器是会影响优先级的)
  • 怎样覆盖 !important?只需再添加一条 带!important 的CSS规则,要么给这个给选择器更高的优先级(添加一个标签,ID或类);或是添加一样选择器,把它的位置放在原有声明的后面(总之,最后定义一条规则比胜)
  • 一个基本原则,谁越具体谁起作用;同一级谁举例元素最近,谁起作用.

3.class 和 id 的使用场景?

id一般用于构建页面的框架,同时大多数情况是开放给后端人员用于使用的;而calss用来给我结构中的内容添加样式.

4.使用CSS选择器时为什么要划定适当的命名空间?

通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类。我们按照CSS的性质和用途,将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”.
一般在选择器的名称以一个功能单词的首字母+下划线+ 内容的介绍 来组合选择器的名称.
提供一个不错的链接以供继续学习 网易nec css

5.以下选择器分别是什么意思?

#header{} 选中id=header的元素
.header{} 选中class=header的元素
.header .logo{}  header和logo中的元素
.header.mobile{}  header中的mobile的元素
.header p, .header h3{} 选中header中的p和h3元素
#header .nav>li{}  header类中的nav标签里面的li元素(不包含li内部元素)
#header a:hover{} header中的a元素添加用户行为伪类

6.列出你知道的伪类选择器

css2部分详见第一题答案.
css3中介绍两个相似的伪类选择器:

 :first-child  父级中的第一个元素是...才选中
 :first-of-type  父级中的某个元素的第一个...

举例说明:

任务8.png

7.:first-child和:first-of-type的作用和区别?

见第六题!

8.运行如下代码,解析下输出样式的原因。

任务8-2.png

.item1:first-child{ color: red;}这段代码作用:选中第一个是类名为item1的元素,并改字体颜色为红色
.item1:first-of-type{ background: blue; 选中同类标签中的第一个元素.所以选中了<p><h3>

8.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

作用在块级区域中使内部的行内元素居中.一般结合display:inline-block 来使元素居中.

9.如果遇到一个属性想知道兼容性,在哪查看?

caniuse

:nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素的每个 <p> 元素。

Paste_Image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容