2.选择器_现有一个定义为.ceng的样式,要在该样式下定义类选择器样式firstp1、firstp2、firs-CSDN博客

本文链接：https://blog.csdn.net/yymonkeydo/article/details/78791673

元素选择器

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>