您的位置：首页 > Web前端 > CSS

HTML&CSS Learning Notes 5

2015-09-17 02:57 691 查看

CSS

Basic II

Multiple Selectors

If you want to grab

<p>

s that are inside two

<div>

s, and not all

<p>

s, you can select those in the CSS tab.

div div p {
/*CSS Stuff*/
}

* {   }

One Selector rule them all.

opacity:[float]

Opacity attribute has one parameter which range is from 0 to 1.

display:[none/block/inline/inline-block]

none: hidden

block: as block unit, there is tab before and after this block.

inline: default value, one by one until the line cannot hold them.

inline-block: has all properties of inline, but also contain the feature of block.

within selector

For instance,

div > p { /*CSS Stuff*/ }

This only grabs

<p>

s that are nested directly inside of

<div>

means “Directly children”.

class="[CLASS]"

.[CLASS] {    }

More specific selector can “override” the properties. When you have a bunch of elements that should all receive the same styling.

id="[ID]"

#[ID] { }

When you have exactly one element that should receive a certain kind of styling.

pseudo-class selector

Pattern like,

selector:pseudo-class_selector {
property: value;
}

hover: the content will be styled when your mouse hovering over that field.

link: an unvisited link.

visited: a visited link.

active: the exactly time selecting the link.

pseudo-class selector

first-child

nth-child([num])

p:first-child {
color: red;
}

p:nth-child(2) {
color: red;
}

[parent-selector][space]:nth-child([num])

styles the item which same to the

[child-selector]:nth-child([num])

. The first one is for any type of children of this parent, but the second is for the exactly same type and same order one.

In short:

parent: only depends on the ordering number to styling its child items.

child: as child, depends on both of the ordering number and its type.

For example:

<body>
<h3 class="fancy">H Three (h3)</h3>
<p >Paragraph Three (h3)</p>
<p >Serious</p>
<p>Third Paragraph</p>
</body>

body :nth-child(3) {
font-size:100px;
}
p:nth-child(3) {
color:red;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML&amp;CSS Learning Notes 5

HTML&CSS Learning Notes 5