CSS学习笔记——选择器——day two

目录

一、什么是CSS

二、创建 CSS 样式表的三种方式

三、层叠和继承 

四、 CSS 选择器

（一）基本选择器

（二）复合选择器

（三）伪选择器

一、伪元素选择器（伪元素前置两个冒号::）

二、伪类选择器（伪类前置一个 冒号:）

---

一、什么是CSS

 层叠样式表，用来对 HTML 文档外观的表现形式进行排版和格式化。

CSS 样式由一条或多条以分号隔开的样式声明组成。

每条声明的样式包含着一个 CSS 属性和属性值。 

二、创建 CSS 样式表的三种方式

1.元素内嵌样式；

2.文档内嵌样式；

3.外部引入样式。 

三、层叠和继承 

样式表层叠：

指的是同一个元素通过不同方式设置样式表产生的样式重叠。

如果样式相同，会产生冲突替换，这时由优先级决定显示。

通过五种方式进行，以下优先级从低到高：

(1).浏览器样式（元素自身携带的样式）；

(2).外部引入样式（使用引入的样式）；

(3).文档内嵌样式（使用

这是HTML5

还有一种样式叫浏览器样式，是这 个元素在这个浏览器运行时默认附加的样式。

四、 CSS 选择器

通过选择器定位到想要设置样式的元素。

目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。

（一）基本选择器

使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

* { border: 1px solid red; }

“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括 和标签。
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就 是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般 来说，不常用。

2.元素选择器

p { color: red; }

段落

直接使用元素名称作为选择器名即可。

3.ID 选择器

#abc { font-size: 20px; }

段落

通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。一个页面可以用很多ID，但是ID名不能出现两个相同的。

而class名字可以相同，表示一类元素，类选择器。

4.类选择器

①    .abc { border: 1px solid red; }
加粗 无

通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。

②  p.abc { border: 1px solid red; }

也可以使用“元素.class 值”的形式，限定某种类型的元素。

③   无

.def{ background-color:red;}

类选择器还可以调用多个样式，中间用空格隔开进行层叠。

可以单独调用后面的扩展样式。

5.属性选择器

①   [href] { color: orange; }

属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。所需 CSS2 版本 。

②  [type="password"] { border: 1px solid red; }

匹配属性值的属性选择器。所需 CSS2 版本 。
 

③    [href^="http"] { color: orange; }

属性值开头匹配的属性选择器。所需版本 CSS3。

④    [href$=".com"] { color: orange; }

属性值结尾匹配的属性选择器。所需版本CSS3 。

 ⑤    [href*="baidu"] { color: orange; }

属性值包含指定字符的属性选择器。相当于一个模糊查询，尽量少用。所需版本 CSS3。

⑥    [class~="edf"] { font-size: 50px; }

属性值具有多个值时，匹配其中一个值的属性选择器。了解就行。所需版本 CSS2 。

⑦   [lang|="en"] { color: red;}

属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。所需版本 CSS2 。

比如 HTML5。

（二）复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。 

1.分组选择器

p,b,i,span { color: red; }

将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器（派生选择器）

p b { color: red; }

选择

元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。
3.子选择器

ul>li{ border: 1px solid red; }
 
	
我是儿子
		

			
我是孙子
			
我是孙子
		
	
	
我是儿子
	
我是儿子

子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一 级的元素，不可以再往下选择。孙子选不上，只对儿子有用。

4.相邻兄弟选择器

p + b { color: red; }

相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

两个标签并列就是兄弟。
5.普通兄弟选择器

p ~ b { color: red; }

普通兄弟选择器匹配和第一个元素后面的所有元素。
中间隔了几个标签，还是同一等级，无父子关系，就是普通兄弟。

（三）伪选择器

一、伪元素选择器（伪元素前置两个冒号::）

1.::first-line 块级首行

::first-line { color: red; }

块级元素比如

、

等的首行文本被选定。span无法选择，无论浏览器如何拉伸，只有第一行变成红色。

如果想限定某种元素，可以加 上前置 p::first-line。

2.::first-letter 块级首字母

::first-letter { color: red; }

块级元素的首行字母。中文也有用。

3.::before 文本前插入

a::before { content: '点击-'; }

在a标签包含的文本前插入内容。

4.::after 文本后插入

a::before { content: '-请进'; }

在a标签包含的文本后插入内容。

5.   ::selection

::selection { color: red; }

当选择文字时触发选择。鼠标框选内容后，颜色变红。有的浏览器不支持。CSS3 版本下的选择器。

二、伪类选择器（伪类前置一个 冒号:）

1、结构性伪类选择器

根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。所有伪类都需要加前置选择器来限制范围，不然会默认以body为前置。 

①   根元素选择器

:root { border: 1px solid red; }

匹配文档中的根元素，基本不怎么用，因为总是返回元素。

②   子元素选择器

ul > li:first-child { color: red; }

选择第一个子元素。如果不加ul li它会把body默认为子元素，所有标签都变红。

ul > li:last-child { color: red; }

选择最后一个子元素。
ul > li:only-child { color: red; }

选择只有一个子元素的那个子元素。比如两个ul,里面包含的li数量不同，选择只包含一个的ul。

div > p:only-of-type { color: red; }

选择只有一个指定类型的子元素的那个子元素。如一个div里面包含了很多不同种类的标签，不会被选上，包含很多相同的标签会被选上。

③.:nth-child(n)系列

ul > li:nth-child(2) { color: red; }
选择子元素的第二个元素。

ul > li:nth-last-child(2) { color: red; }

选择子元素倒数第二个元素。

div > p:nth-of-type(2) { color: red; };

选择特定子元素的第二个元素。少用，太绕。

div > p:nth-last-of-type(2) { color: red; };

选择特定子元素的倒数第二个元素。少用，太绕。

2、UI 伪类选择器 

根据元素的状态匹配元素。 

①  :enabled

:enabled { border: 1px solid red; }

选择启用状态的元素。

②  :disabled

:disabled { border: 1px solid red; }

选择禁用状态的元素。

③  :checked

:checked { display: none; }

选择勾选的 input 元素。

④   :default

:default { display: none; }

从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。

⑤  :valid 和:invalid

input:valid { border: 1px solid blue; } 
input:invalid { border: 1px solid green; }

输入验证合法与不合法显示时选择的元素。

⑥  :required 和:optional 

input:required { border: 1px solid blue; } 
input:optional { border: 1px solid green; } 

根据是否具有 required 属性选择元素。

3、动态伪类选择器 

根据条件的改变匹配元素。 

①  :link 和 visited

a:link { color: red; }

a:visited { color: orange; }

:link 表示未访问过的超链接，:visited 表示已访问过的超链接。

②  :hover

a:hover { color: blue; }

表示鼠标悬停在超链接上。

③  :active

a:active { color: green; }

表示鼠标按下激活超链接时。
④  :focus

input:focus { border: 1px solid red; }
表示获得焦点时。

4、其他伪类选择器

①  :not

a:not([href*="baidu"]) { color: red; }

否定选择器，反选。所有的a标签，除了链接到百度的，剩下的链接都变红。
②   :empty

:empty { display: none; }

匹配没有任何内容的元素。

里面不包含内容，但是P标签默认会换行，隐藏掉就不会换行了。
③   :lang

:lang(en) { color: red; }

选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致。
④  :target

:target { color: red; }

定位到锚点时，选择此元素。