HTML入门 - css选择器

选择器

作用:告诉浏览器网页上的那些元素需要设置什么样的样式.

元素选择器

• 可以根据标签的名字来从页面中选取指定的元素.

• 语法: 标签名{}

例如:p{color:red}

类选择器

*可以根据元素的class属性选取元素.

• 语法 : .class属性值{}

例如:比如.hello会选中页面所有class属性为hello的元素
.hello{font-size:50px}

ID选择器

• 通过元素的id属性值选中唯一的一个元素

• 语法:#id属性值{}

例如:#p1{font-size:20px}

复合选择器(交集选择器)

• 通过选择器分组可以同时选中多个选择器对应的元素

• 语法:
  选择器1,选择器2,选择器n{}

例如: span.p3{background-color: yellow;}

群组选择器(并集选择器)

• 群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。

• 选择器1,选择器2,选择器3 { }

p,.hello,#box{background-color: yellow;}
比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

通用选择器

• 可以同时选中页面中的所有元素.

• 语法: *{}

标签之间的关系

祖先元素:
直接或间接包含后代元素的元素。
后代元素:
直接或间接被祖先元素包含的元素。
父元素:
直接包含子元素的元素。
子元素:
直接被父元素包含的元素。
兄弟元素:
拥有相同父元素的元素

后代选择器

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

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

例如:p,strong{color：red:}
比如p strong 会选中页面中所有的p元素 内的strong元素

伪类选择器

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

有四个伪类可以让你根据访问者与该链接的交 互方式，将链接设置成4种不同的状态。
正常链接
a:link
a:link{
color:yellowgreen;
font-size:50px;
}
访问过的链接
a:visited（只能定义字体颜色）
a:visited{
color: red;
}
鼠标滑过的链接
a:hover
a:hover{
color: skyblue;
}
正在点击的链接
a:active
a:active{
color: black;
}

• IE6中，不支持对超链接以外的元素设置:hover和:active

获取焦点
:focus
文本框获取焦点以后，修改背景颜色为黄色*/
input:focus{
background-color: yellow;
}
指定元素前
:before
p:before{
content: "我会出现在整个段落的最前边";
color: green;
}
指定元素后
:after
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
选中的元素
::selection

其他选择器

给段落定义样式

• 首字母：:first-letter

使用伪元素来表示元素中的一些特殊的位置
为p中第一个字符来设置一个特殊的样式
p:first-letter{
color: red;
font-size:20px;}

• 首行: :first-line

为p中的第一行设置一个背景颜色为黄色
p:first-line{background-color:yellow;
}

属性选择器

• 属性选择器可以挑选带有特殊属性的标签。

• 语法:

作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
p[title]{
background-color: yellow;
}
[属性名="属性值"] 选取含有指定属性值的元素
例如: 为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
background-color: yellow;
}
[属性名^="属性值"] 选取属性值以指定内容开头的元素
为title属性值以ab开头的元素例如:设置一个背景颜色为黄色
p[title^="ab"]{
background-color: yellow;
}
[属性值="c"]{
background-color: yellow;
}
[属性名="属性值"] 选取属性值包含指定内容的元素
例如: 为title属性值包含c的元素设置一个背景颜色/
p[title*="c"]{
background-color: yellow;
}

子元素选择器

• 子元素选择器可以给另一个元素的子元素 设置样式。

• 语法：
  父元素 > 子元素{}
  比如body > h1将选择body子标签中的所 有h1标签。

:first-child 可以选中第一个子元素
例如:body>p:first-child{
background-color: yellow;
}
:last-child 可以选中最后一个子元素
例如:p:last-child{
background-color: yellow;
}
:nth-child 可以选中任意位置的子元素
例如: p:nth-child(even){
background-color: yellow;
}
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素

:first-of-type
:last-of-type
:nth-of-type
和child类似，只不过child是在所有的子元素中找
而type是在当前类型的子元素中找

例如 :p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}

兄弟选择器

• 除了根据祖先父子关系，还可以根据兄弟 关系查找元素。

• 语法:
  查找后边一个兄弟元素
  兄弟元素 + 兄弟元素{}

例如 span + p{
background-color: yellow;
}

• 查找后边所有的兄弟元素
  兄弟元素 ~ 兄弟元素{}

例如:span ~ p{
background-color: yellow;
}

否定伪类

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

• 语法：:not(选择器)

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

继承

• 像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承

• 利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式

• 但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承

选择器的权重

• 过当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示

优先级的规则
! important 最高
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1

通配*，优先级0

• 继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
但是注意，选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算的
div, p, #p1, .hello{}

• 可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超内联样式，但是在开发中，尽量避免使用!important

权重的计算

• 计算权重需要将一个样式的全部选择器相加，比如 body h1的权重是20，h1的权重是10，所以第一个选择器设置的样 式会优先显示。