CSS常用选择器

来源：互联网发布：穷女孩会经历什么知乎编辑：程序博客网时间：2024/06/15 16:43

一、基础选择器

class 选择器

/*选择并设置 class="intro" 的元素的样式*/.intro {     background-color:yellow;}

id选择器

/*为 id="firstname" 的元素设置样式*/#firstname {     background-color:yellow;}

标签选择器

/*选择并设置所有 <p> 元素的样式*/p {     background-color:yellow;}

二、常用的组合选择器

并集选择器：使用”,”（逗号）连接两个选择器

/*选择并设置所有 <h1> 样式和所有 <p> 元素的样式*/h1,p {     background-color:yellow;}

后代选择器：使用” “（空格）连接

/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/div p {     background-color:yellow;}

子代选择器：使用”>”连接

<style type="text/css">/*选取父元素是 <div> 元素的每个 <strong> 元素,结果是只有第一行<strong> 元素内文本变红*/    div>strong {        color: red;    }</style><div>    This is <strong>very</strong> <strong>very</strong> important. <br>    This is <em>really <strong>very</strong></em> important.</div>

相邻选择器：使用”+”连接

/*选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色*/div+p {     background-color:yellow;}

通配符选择器：”*”

/*选择页面内所有元素，并设置内外边距为0*/* {    margin: 0px;    padding: 0px;}

三、常用的伪类选择器

:hover 选择器

/*当鼠标悬停在<a>之上时，设置背景颜色为黄色*/a:hover{     background-color:yellow;}

:nth-child() 选择器

<style>/*使第偶数个<li>变成红色*/li:nth-child(2n) {    color: red;}</style>--------------------------------------<ul>    <li>黑色</li>    <li>红色</li>    <li>黑色</li>    <li>红色</li>    <li>黑色</li>    <li>红色</li></ul>

<html><head>    <style>         /*规定属于其父元素的第二个子元素的每个 p 的背景色*/        p:nth-child(2) {            background:red;        }    </style></head><body>    <h1>这是标题</h1> <!--第一个子元素-->    <p>第一个段落。(红色)</p><!--第二个子元素-->    <p>第二个段落。</p>    <p>第三个段落。</p>    <p>第四个段落。</p></body></html>

:first-child 选择器和 :last-child 选择器

/*选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式，相当于:nth-child(1)*/p:first-child { background-color:yellow;}

/*指定属于其父元素的最后一个子元素的 p 元素的背景色，相当于：:nth-last-child(1)*/p:last-child { background:#ff0000;}

阅读全文

0 0