美文网首页
CSS选择器 以及作业

CSS选择器 以及作业

作者: 请叫我Bob | 来源:发表于2018-08-07 20:25 被阅读0次

今天我们来简单说一下选择器我也是现学现用,ID选择器,类选择器,属性选择器,元素选择器,等等不就不一一说了!

1 id选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。
red {color:red;}

下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色。

<p id="red">这个段落是红色。</p>

2 类选择器:

类选择器类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

.one{color: yellow;}

他的语法也是,即类名前有一个点号(.),然后结合通配选择器

*.important {color:red;}

3 属性选择器:

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

下面的例子为带有 title 属性的所有元素设置样式:
[title]{color:red;}
下面的例子为 title="W3School" 的所有元素设置样式:
[title=W3School]{border:5px solid blue;}

注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

4 元素选择器:

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

html {color:black;}
h1 {color:blue;}
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

晚上作业

1.plate 元素选择器
2.bento 元素选择器
3.#fancy id选择器
4.plate apple 后代元素选择器
5.#fancy pickle 后代元素选择器
6..small 类选择器
7.orange.small 复合选择器 交集选择器
8.bento orange.small 后代元素选择器
9.plate,bento 选择器分组,并集选择器
10.* 通配选择器sz
11.plate * 后代元素选择器 .plate 中所有,不是包含
12.plate + apple 兄弟元素选择器
13.pickle ~ pickle 兄弟元素选择器
14.plate > apple 子元素选择器
15.plate>orange:first-child 子元素选择器
16.:only-child 子元素选择器 只有一个子元素
17..small:last-child 子元素选择器
18.:nth-child(3) 子元素选择器
19.:nth-last-child(4) 子元素选择器
20.apple:first-of-type 子元素选择器
21.plate:nth-of-type(even) 子元素选择器
22.plate:nth-of-type(2n+3) 子元素选择器 0计数
23.apple:only-of-type 子元素选择器 只有苹果
24..small:last-of-type 子元素选择器 用类判断
25.bento:empty 子元素选择器 子元素为空
26.apple:not(.small) 否定伪类 去除small类

相关文章

  • CSS选择器 以及作业

    今天我们来简单说一下选择器我也是现学现用,ID选择器,类选择器,属性选择器,元素选择器,等等不就不一一说了! 1 ...

  • CSS选择器与文本样式

    CSS选择器以及文本样式 CSS学习 CSS 层叠样式表(Cascading Style Sheets)CSS可用...

  • CSS选择器与优先级详解(一)

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS...

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • 17-18日作业

    问答作业 1.什么是CSS语法 2.列举常见的CSS选择器 标签选择器:顾名思议,标签选择器是直接将HTML标签作...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • 第二次作业(学习中碰到的各种问题)

    1.作业 1.1什么是css语法? 答:CSS 语法由三部分构成:选择器、属性和值。CSS又名层叠样式表,选择器通...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • 前端知识

    一. CSS选择器以及选择器的优先级 1.!important 内联样式 ID选择器 类选择器/属性选择器/伪类选...

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

网友评论

      本文标题:CSS选择器 以及作业

      本文链接:https://www.haomeiwen.com/subject/lztzvftx.html