2.选择器

来源：互联网发布：快手变声器最火软件编辑：程序博客网时间：2024/05/22 00:13

元素选择器

html{color:black;}h2{color:gray;}h1{color:silver;}

分组

选择器分组

分组用，分隔开

h2, p{color:gray;}

通配选择器

*{color:red;}

类选择器和ID选择器

类选择器.

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *.warning{color:red;}    </style></head><body>    <p class="warning">这是一个测试</p>    <p>什么<span class="warning">对不对</span></p></body>

多类选择器：

css顺序可以随便写

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .warning{color:red;}        .urgent{font-size:40px;}        .urgent.warning{background: #CCC;}    </style></head><body>    <p class="urgent warning">这是一个测试</p>    <p>什么<span class="warning">对不对</span></p></body>

匹配：

p.urgent.warning{background: #CCC;}可以匹配下面<p class="urgent help warning">这是一个测试</p>

ID选择器#

#title{font-size: 40px;}<p id="title">这是一个标题</p>

ID选择器的ID只能出现一次

属性选择器

简单属性选择器

如果希望选择有某个属性的元素，而不论该属性的值是什么。可以用简单属性选择器

h1[class]{color:green;}<h1 class="hh">这是简单属性选择器</h1>

h1有class属性都添加color为green的css属性。

例如：对img的alt属性，添加css属性

img[alt]{border:3px solid #CCC;}

可以多个属性一起：

a[href][title]{font-weight:blod;}

根据具体属性值选择

[属性=属性值]

a[title="t1"]{font-size:12px;}a[title="t1"][href="http://www.xxx.xx"]{font-size:20px;}

a[class="h1 title"]{color:green;}

a[class="h1 title"]{color:green;} 这个顺序就是h1 title 顺序不能随便

根据部分属性值选择~

取反号 ~ 匹配的是空格隔开的属性值

下面匹配有 title的class

h1[class~="title"]{color:yellow;}<h1 class="nav title">这是简单属性选择器</h1>

子串匹配选择器

[foo^="bar"]     foo属性bar开头[foo$="bar"]     foo熟悉bar结尾[foo*="bar"]     foo包含bar

特定属性选择类型

h1[class|="nav"]{color:red;}<h1 class="nav-title">这是简单属性选择器</h1><h1 class="nav-foot">这是简单属性选择器</h1><h1 class="nav title">这是简单属性选择器</h1>最后一个不会有变化， |是选择nav-开头的

后代选择器

用空格

h1 em{color:red;}p b,blockguote b{color:red;}两个元素之间的层次间隔可以是无限的， p 继承的所有b元素，不论b嵌套层次有多深

选择子元素 >

比如：选择h1元素子元素（而不是后代元素）的strong元素

h1>strong{color:red;}

选择相邻兄弟元素+

h1旁边的p的字体色：

h1+p{color: #CCC;}

html > body table + ul{margin-top:1.5em;}

选择紧接在一个table元素后出现的所有ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。

伪类和伪元素

伪类选择器 :

a:link{color:black;}a:visited{color:green;}

伪类动态

前两个是静态的，后三个是动态，伪类的顺序很重要

a:link{color:black;}a:visited{color:green;}a:focus{color: red;}a:hover{color:yellow;}a:active{color: pink;}

顺序：

link-visited-focus-hover-active
动态伪类可以应用到任何元素

例如：对body下所有子元素鼠标悬浮的时候设置黄色背景：

body *:hover {background:yellow;}

选择第一个子元素 first-child

静态伪类:first-child：用来选择第一个子元素

<div>    <p>第一个P</p>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul>    <div>        <h1>h1</h1>        <p>p1</p>        <p>p2</p>        <p>p3</p>    </div></div>

这个div里面的第一个子元素有：p（div第一个） li（ul第一个） h1（div第一个）

相当于：

li:first-child {    color: red;}p:first-child {    color: green;}h1:first-child {    color: green;}<div>    <p class="first-child">div的第一个子元素P</p>    <ul>        <li class="first-child">ul的第一个子元素</li>        <li>2</li>        <li>3</li>    </ul>    <div>        <h1 class="first-child">div的第一个子元素</h1>        <p>p1</p>        <p>p2</p>        <p>p3</p>    </div></div>

根据语言选择 lang() 相当于 |=

*:lang(fr) {font-style:italic;}匹配fn fn-

伪类结合

不要把互斥对的伪类结合在一起！！！

a:link:hover{color:red;}a:visited:hover{color:yellow;}//互斥的不能放一起 还可以加上语言哦a:link:hover:lang(de){color:gray;}a:visited:hover:lang(de){color:red;}

伪元素选择器

CSS2.1定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和设置之后元素的样式

1.设置首字母样式：:first-letter

p:first-letter{font-size:40px;color:red;}<p>这是设置首字母样式例子 first-letter</p>

2.设置第一行样式：:first-line

p:first-line{font-size:40px;color:red;}<p>first-line<br/>这是设置首行样式例子 </p>

CSS2 first-letter 和 first-line 的限制：只能应用于标记和段落之类的块元素，不能应用于超链接等行内元素

3.设置之前和之后的元素的样式 :before :after

在每个h2元素之前加一对红色的中括号

h2:before{content:"[]";color:red;}<h2>before测试1</h2><h2>before测试2</h2>

在每个h2之后插入end

h2:after{content:"end";color:red;}<h2>after测试1</h2><h2>after测试2</h2>

阅读全文

0 0