HTML&CSS Learning Notes 5

来源：互联网发布：js 获取浏览器信息编辑：程序博客网时间：2024/05/21 15:42

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>s. > 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 selectorfirst-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;  }

0 0