css_1_选择器简明参考-CSDN博客

1、元素会在页面内占据一个矩形区域，该区域就是元素的盒子（box），由四部分组成（content，padding，border，margin），其中有两部分是可见的，content和border。

2、元素还可以包含其它元素。这种情况下，父元素的内容盒子就称为子元素的块容器（container block)，也称为容器。

3、特定服务器前缀：

Chrome 、Safari -webkit-

Opera - -o-

Firefox - -moz-

IE - -ms-

4、选择器的简明参考：

* 选取所有元素

<type> 指定的元素

.<class> 类

#<id> id

<selector> , <selector> 同时选取

<selector> <selector> 匹配第一个元素选择器的后代选择器

<selector> > <selector> 匹配第一个元素选择器的直接后代

<selector> + <selector> 匹配紧跟在第一个元素选择器之后的元素

::first-line 选取块级元素文本的首行

::first-letter 选取块级元素文本的首字母

:before

:after

:root 选取文档中的根元素

:first-child

:last-child

:only-child

:nth-child(n) 选取父元素的第N个子元素

:nth-last-child(n) 选取父元素的倒数第n个子元素

:nth-of-type(n)

:enabled 选取已启用的元素

:disabled 选取被禁用的元素

:checked 选取所有选中的复选框和单选按钮

:default 选取默认元素

:valid

:invalid 选取基于输入验证判定的有效或者无效的input元素

:link

:visited

:hover

:active

:focus

:empty

:lang

:target

---------------------------------------------------------------------------------------------------------------

CSS基本选择器

5、通用选择器：

* {
    border: thin #ff2b3f solid;
    padding: 4px;
}

会匹配所有的元素，包括 html 和 body，但是没有head。

6、元素类型选择器

a {
    border: thin #ff2b3f solid;
    padding: 4px;
}

7、元素类选择器

类选择器采用全局属性class匹配指定类的元素。

.class{ }

*.class{ }

span.class{ }

8、元素id选择器

#id{ }

9、元素属性选择器

[ href ] { }

-----------------------------------------------------------------------------------------------------------------------------

CSS复合选择器

10、并集选择器

a , [lang |="en"] { }

p , span {
    border: thin #ff2b3f solid;
    padding: 4px;
}

11、后代选择器

p span { }

#my span { }

p  span {
    border: thin #ff2b3f solid;
    padding: 4px;
}

影响的是所有的后面的后代元素

12、子代选择器

p > sapn { }

p > span {
    border: thin #ff2b3f solid;
    padding: 4px;
}

与后代选择器相似，但是，范围比后代选择器小，选择的是直接后代元素（后代的后代就不在范围内）。

13、相邻兄弟选择器

p + span { }

p + span {
    border: thin #ff2b3f solid;
    padding: 4px;
}

这个是选择紧跟在某个元素之后的元素。

14、普通兄弟选择器

p ～span { }

p ~ span {
    border: thin #ff2b3f solid;
    padding: 4px;
}

比相邻兄弟选择器范围宽，可以是兄弟的兄弟元素

测试：

<p>
    HUT
    <span>Start Here! </span>
    <span>Welcome here!</span>
    
    <span> !<span>Hello</span>!</span>
</p>

<span> here!</span>

<span> here!</span>

------------------------------------------------------------------------------------------------------------------------------------

CSS伪元素选择器

15、::first-line选择器

匹配文本块的首行。

p::first-line{
    background-color: blue;
}

16、::first-letter选择器

匹配文本块的首字母。

p::first-letter{
    background-color: burlywood;
}

汉字与字母是一样的效果。

17、:before 和 :after选择器

这两个选择器与前面的选择器不一样，因为它们会生成内容，并将其插入文档。

p:before{
    content: 'Hello';
    background-color: seagreen;
}
p:after{
    content: 'Hello';
    background-color: seagreen;
}

-------------------------------------------------------------------------------------------------------------------------------

伪类选择器

一、结构性伪类选择器

二、UI伪类选择器

三、动态伪类选择器

四、其他伪类选择器

20、否定选择器:not

a:not ( [href *="apress"]) {

border:thin solid green;

}

//对括号内的选择器取反。