CSS【2】-- CLASSES AND IDS

最新推荐文章于 2024-07-25 15:07:09 发布

Sammy_

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量352

点赞数

分类专栏： website css html 文章标签： css

本文链接：https://blog.csdn.net/smallbean_/article/details/50879555

版权

website 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

Multiple Selectors

<div>
    <div>
        <p>I like tacos!</p>

So what if you want to grab

s that are inside two

s, and not all

You select those in the CSS tab like this:

div div p {
    /*CSS stuff!*/
}

One selector to rule them all

 * {
 ...;
}

Parents, children, and siblings

<!DOCTYPE html>
<html> <!--The trunk of the tree!-->
    <head> <!--Child of html, parent of title,
           sibling of body-->
        <title></title> <!--Immediate child of head,
                        child of head AND html-->
    </head>
    <body> <!--Child of html, parent of p,
           sibling of head-->
        <p></p> <!--Immediate child of body,
                child of body AND html-->
    </body>
</html>

Swinging from branch to branch

 you can reach an element that is a child of another element like this:

div div p { /* Some CSS */ }

If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol, like so:

div > p { /* Some CSS */ }

class and an ID
class – some selectors
id – one selector

Classes are useful when you have a bunch of elements that should all receive the same styling. 

<div class="square"></div>
<img class="square"/>
<td class="square"></td>

Classes are identified in CSS with a dot (.), like so:

.square {
    height: 100px;
    width: 100px;
}

这里写图片描述

IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling.

<div id="first"></div>
<div id="second"></div>
<p id="intro"></p>

#first {
    height: 50px;
}

#second {
    height: 100px;
}

pseudo-class selectors

is a way of accessing HTML items that aren't part of the document tree

selector:pseudo-class_selector {
    property: value;
}

这里写图片描述

文件【css2-text.html css2-text.css】

**pseudo-class selectors**

a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouse over.

Another useful pseudo-class selector is first-child.

p:first-child {
    color: red;
}

这里写图片描述

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

:nth-child

这里写图片描述

一定要注意是body的第几个child，如果body下面是h3，p，p，p，如果写第三个p，也就是最后一个p的话，它其实是body的第四个child，h3是first-child

Sammy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS【2】-- CLASSES AND IDS

Multiple Selectors<div> <div> <p>I like tacos!</p>So what if you want to grab s that are inside two s, and not all s?You select those in the CSS tab like this:div div p { /*CSS stuff!*
复制链接

扫一扫

专栏目录