CSS 学习笔记（一）选择器

css学习笔记

一个标签可以有多个class。重复的以后面的为准

并集选择器：用逗号分隔的。

复合选择器（交集选择器）：

​ 满足多个条件的选择器。

​ 语法：选择器1选择器2选择器3{}

​ (中间没有空格)

​ 对拥有class为p3的span元素进行设计：

	span.p3{

		background-color:yellow;

   } 

父元素 与 子元素

就是直接包含的两个标签。

祖先元素：直接或间接包含，所以父元素也是祖先元素

后代元素。

兄弟元素：拥有相同父元素的元素。

后代元素选择器

​ 作用：选中指定元素的指定后代元素

​ 语法：祖先元素 后代元素{}

子元素选择器

父元素>子元素{}

伪类选择器

专门用来表示元素的一种特殊的状态

比如访问过的超链接，获取焦点的文本框

a:link 没访问过的链接

a:visited 访问过的链接

浏览器是通过历史记录判定的一个链接是否被访问过。

因此，有的浏览器为了保护隐私，所以使用visited伪类只能设置字体颜色。

a:hover鼠标移入

a:active 链接被点击的状态

p标签也可以使用hover等。

focus 获取焦点。

input获取焦点后，背景颜色变成黄色。

Input:focus {

	background-color:yellow;

}

p：：selection

p标签中选中的内容使用样式

可以使用：：selection

伪元素

使用伪元素来表示元素中的一些特殊位置。

为p中第一个字符来设置一个特殊样式。

P:first-letter{

	color:

}

为p中第一行设置一个样式。

P:first-line{

}

p:before

表示元素最前面的部分。

一般before都需要结合content这个样式一起使用，

通过content可以向before或after的位置添加一些内容。这个内容是选不中的。

p:before{

​ content:"...";

​ color:

}

属性选择器

可以根据元素中的属性或属性值来选取指定元素。

<p titl="hello":>这是一个段落</p>

为所有具有title属性的p元素，设置一个背景颜色为黄色

p[title]{
 	background-color:yellow; 
}

为所有具有title属性=hello的p元素，设置一个背景颜色为黄色

p[title="hello"]{
  background-color:yellow;
}

为title属性值以ab开头的元素设置一个背景颜色为黄色

p[title^="ab"]{
  background-color:yellow;
}

为title属性值以c结尾的元素设置一个背景颜色

p[title$="c"]{
  background-color:yellow;
}

为title属性值包含c的元素设置一个背景颜色

p[title*="c"]{
  background-color:yellow;
}

其他子元素选择器

选中第一个子元素。

要求p是父元素的第一个子元素,不是父元素的第一个p元素。

p:first-child{
//冒号前面不写，前面就是*，是一个通配符
}

body>p:first-child{
 //表示body标签下的第一个元素，且是p的元素
}

p:last-child{
//选中最后一个
}

p:nth-child(5){
  //选中第5个
}
p:nth-child(even){
  //选中第偶数个
  
  //如果填odd就是基数
  //可以用于做表格隔行变色
}

p:first-of-type{
//操作第一个p元素
}
p:last-of-type{
//操作最后一个p元素
}
p:nth-of-type(){
//操作第n个p元素
}

兄弟元素选择器

使用+号,为span(紧挨着的)后一个p元素设置样式

span + p{
   background-color:yellow;
}

使用～号，选中span后边的所有兄弟p元素

span ~ p{
  background-color:yellow;
}

否定伪类：

为所有p元素设置一个背景颜色为黄色，除了class的值为hello的。

作用：可以从已选出的元素中剔除出某些元素。

：not(选择器)

p:not(.hello){
  background-color: yellow;
}