CSS 选择器

基本选择器

id选择器

<style>
    #play {
        color: blue;
    }
</style>

<p id="play">CSS</p>	

类选择器

<style>
    .green {
        color: green
    }
</style>
<p class="green">CSS</p>

标签选择器

<style>
    h1 {
        color: aquamarine;
    }
</style>

<h1>CSS</h1>
<h2>CSS</h2>

通配符选择器

通配符*应用于所有未被定义的所有元素。

<style>
    * {
        font-size: 14px;
    }
    # container *{
        font-size: 14px;
    }
</style>
<div id="container">
    <h1>CSS</h1>
</div>
<h2>CSS</h2>

组合选择器

多元素选择器

多元素选择器，同时匹配所有元素，标签之间用逗号分隔。

<style>
    h1, h2 {
        color: #86fa3a;
        font-size: 50px;
    }
</style>

<h1>CSS</h1>
<h2>CSS</h2>

相邻选择器

可选择紧接在另一个元素后的元素，且二者有相同的父元素。

<style>
    h1 + p {
        color: #86fa3a;
    }
</style>
<h1>CSS</h1>
<p>CSS</p>

兄弟节点组合选择器

兄弟节点组合选择器跟X+Y很相似，然后它又不是那么的严格，ul + p选择器只会选择紧挨跟着指定元素的那些元素，而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

<style>
    h1 ~ p {
        color: #86fa3a;
    }
</style>
<h1>CSS</h1>
<p>CSS</p>
<p>CSS</p>
<p>CSS</p>

子选择器

只选择自己的子元素。

<style>
    p > a {
        color: #39c5bb;
    }
</style>

<p>Css
    <a rel="#">链接</a>
</p>

后代选择器

<style>
    table p {
        font-size: 20px;
        color: #4c7ba8
    }
</style>

<table>
    <tr>
        <p>
            CSS
        </p>
    </tr>
</table>

同时选择器

选择同时满足多个选择器的元素。

<style>
    /* 选择同时包含user和login类的元素*/
    .user.login {
        font-size: 35px;
    }
    /*选择包含user类的div元素*/
    div.user {
        color:red;
    }
</style>

<div class='user login'>你好，这是一个 DIV 元素，class='user login',</div>

高级选择器

属性选择器

属性	描述
[attr]	表示带有以 attr 命名的属性的元素
[attr=value]	表示带有以 attr 命名的属性，且属性值为"value"的元素
[attr~=value]	表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中[至少]一个值匹配"value"
[attr	=value]
[attr^=value]	表示带有以 attr 命名的属性，且属性值是以"value"开头的元素
[attr$=value]	表示带有以 attr 命名的属性，且属性值是以"value"结尾的元素
[attr*=value]	表示带有以 attr 命名的属性，且属性值包含有"value"的元素
[attr operator value i]	表示带有以 attr 命名的属性，且属性值匹配"value" [忽略属性值大小] 的元素，在带有属性值的属性选型选择器表达式的右方括号，前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母）

<style>
    ul[href] {
        color: red;
    }

    *[href] {
        color: lightskyblue;
    }

    *[href="http://example.com"] { /*根据属性的值进行匹配*/
        color: blue;
    }

    *[href~="org"] { /*根据属性的值进行模糊匹配，只要含有该值就可以*/
        color: blue;
    }

</style>

<ul>
    <li><a href="#internal">Internal link</a></li>
    <li><a href="http://example.com">Example link</a></li>
    <li><a href="#InSensitive">Insensitive internal link</a></li>
    <li><a href="http://example.org">Example org link</a></li>
</ul>

伪类选择器

选择器	实例	描述
:link	a:link	选择所有未被访问的链接，
:visited	a:visited	选择所有已被访问的链接，
:active	a:active	选择活动链接，
:hover	a:hover	选择鼠标指针位于其上的链接，
:focus	input:focus	选择获得焦点的 input 元素，
:first-letter	p:first-letter	选择每个 元素的首字母，
:first-line	p:first-line	选择每个 元素的首行，
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素，
:before	p:before	在每个 元素的内容之前插入内容，
:after	p:after	在每个 元素的内容之后插入内容，
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个 元素，
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素，
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素，
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素，
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素，
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素，
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数，
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素，
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数，
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素，
:root	:root	选择文档的根元素，
:empty	p:empty	选择没有子元素的每个 元素（包括文本节点）,
:target	#news:target	选择当前活动的 #news 元素，
:enabled	input:enabled	选择每个启用的 元素，
:disabled	input:disabled	选择每个禁用的 元素
:checked	input:checked	选择每个被选中的 元素，
:not(selector)	:not(p)	选择非 元素的每个元素，
::selection	::selection	选择被用户选取的元素部分，
::-webkit-scrollbar	::-webkit-scrollbar	整个滚动条
::-webkit-scrollbar-button	::-webkit-scrollbar-button	滚动条上的按钮
::-webkit-scrollbar-thumb	::-webkit-scrollbar-thumb	滚动条上的滚动滑块
::-webkit-scrollbar-track	::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-track-piece	::-webkit-scrollbar-track-piece	滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner	::-webkit-scrollbar-corner	当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer	::-webkit-resizer	某些元素的corner部分的部分样式（例：textarea的可拖动按钮

<style>
    li:nth-child(2n) { /*偶数子元素*/
        background: orange;
    }

    li:nth-child(2n-1) { /*奇数子元素*/
        background: #c0ff80;
    }
</style>
<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>

媒体查询

定义和使用

• 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {*
  CSS-Code;
*}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="*mediatype* and|not|only (*media feature*)" href="*mystylesheet.css*">

媒体类型

值	描述
all	用于所有设备
aural	已废弃，用于语音和声音合成器
braille	已废弃，应用于盲文触摸式反馈设备
embossed	已废弃，用于打印的盲人印刷设备
handheld	已废弃，用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃，用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等，
speech	应用于屏幕阅读器等发声设备
tty	已废弃，用于固定的字符网格，如电报，终端设备和对字符有限制的便携设备
tv	已废弃，用于电视和网络电视

媒体功能

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数，如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率，
device-height	定义输出设备的屏幕可见高度，
device-width	定义输出设备的屏幕可见宽度，
grid	用来查询输出设备是否使用栅格或点阵，
height	定义输出设备中的页面可见区域高度，
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率，
max-color	定义输出设备每一组彩色原件的最大个数，
max-color-index	定义在输出设备的彩色查询表中的最大条目数，
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率，
max-device-height	定义输出设备的屏幕可见的最大高度，
max-device-width	定义输出设备的屏幕最大可见宽度，
max-height	定义输出设备中的页面最大可见区域高度，
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数，
max-resolution	定义设备的最大分辨率，
max-width	定义输出设备中的页面最大可见区域宽度，
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率，
min-color	定义输出设备每一组彩色原件的最小个数，
min-color-index	定义在输出设备的彩色查询表中的最小条目数，
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率，
min-device-width	定义输出设备的屏幕最小可见宽度，
min-device-height	定义输出设备的屏幕的最小可见高度，
min-height	定义输出设备中的页面最小可见区域高度，
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率，
min-width	定义输出设备中的页面最小可见区域宽度，
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数，如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度，
resolution	定义设备的分辨率，如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序，
width	定义输出设备中的页面可见区域宽度，

实例

如果文档宽度小于 300 像素则修改背景颜色（background-color):

@media screen and (max-width: 300px) {
  body {
    background-color:lightblue;
  }
}