css3选择器

CSS3

css3属性选择器

根据属性名查找某个标签(E[attr])，代码如下

<style>
    p {height: 30px; border: 1px solid black;}
    // 查找含有属性test的p标签
    p [test] {background: red;}
</style>
<body>
    <p test="dhl">dhl</p>
    <p test="xb">xiaobei</p>
</body>

查找某个属性名为固定值的某个标签(E[attr="value"])，测试代码如下：

<style>
    p {height: 30px; border: 1px solid black;}
    // 查找test属性值为dhl的p标签
    p [test="dhl"] {background: red;}
</style>
<body>
    <p test="dhl">dhl</p>
    <p test="xb">xiaobei</p>
</body>

E[attr~="value"] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的"~"不能不写，详细代码如下：

<style>
    p {height: 30px; border: 1px solid black;}
    // 查找含有属性test，并且属性值列表中含有young的p标签
    p [test~="young"] {background: red;}
</style>
<body>
    <p test="dhl young">dhl</p>
    <p test="xb">xiaobei</p>
</body>

E[attr^="value"]指定了属性名，并且具有属性值，属性值是以value开头的，测试代码如下：

<style>
    p {height: 30px; border: 1px solid black;}
    // 查找含有属性test，并且属性值以"girl"开头的p标签
    p [test^="girl"] {background: red;}
</style>
<body>
    <p test="gjrldhl">dhl</p>
    <p test="boyxb">xiaobei</p>
</body>

E[attr$="value"]指定了属性名，并且具有属性值，属性值是以value结尾的，测试代码如下：

<style>
    p {height: 30px; border: 1px solid black;}
    // 查找含有属性test，并且属性值以"dhl"结尾的p标签
    p [test$="dhl"] {background: red;}
</style>
<body>
    <p test="gjrldhl">dhl</p>
    <p test="boyxb">xiaobei</p>
</body>

E[attr*="value"] 指定了属性名，并且有属性值，而且属性值中包含了value，测试代码省略
E[attr|="value"] 指定了属性名，并且属性值为value或者以"value-"开头的值

css3结构性伪类
- E:nth-child(n)，表示E父元素中的第n个子节点，测试代码如下：
- ```
<style>
 p {height: 30px; border: 1px solid black;}
 p: nth-child(1) {background: red;}
</style>
<body>
 1
 2
 3
 4
 5
</body>
```
- E:nth-child(even),表示E父元素中的偶数子节点，odd表示奇数子节点；
- E:nth-child(2n),2n-1, 3n,,,
- p:nth-child(2)找到p标签父级下的第二个子元素，并且这个元素还得是p标签，如果不是p标签，则不生效
- E:nth-last-child(2),表示E的父元素的所有子节点中的倒数第二个
- E:nth-of-type(2) {background: red}找到p标签父元素下的第二个p标签
- E:nth-last-of-type(n),表示E的父元素的所有子节点倒数第n个
- E:first-child E元素父节点的第一个子节点
- E:empty 表示E元素没有子节点，注意：子节点中包含文本节点
- E:only-of-type表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E

css3选择器-伪类

E:target表示当前的URL片段的元素类型，这个元素必须是E，代码如下：

<style>
    div { 200px; height: 200px; background: black; font:50px/200px "微软雅黑"; color: #fff; text-align:center; display:none;}
    div:target {display:block;}
    
</style>
<body>
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

E:disabled表示不可点击的表单控件，E:enabled表示可点击的表单控件

<style>
    input{100px;height:200px; color:#000;}
    input:enabled {color;red;}
    input:disabled {color:blue;}
</style>
<body>
    <input type="text" value="请输入" disabled />
</body>

E~F表示与E毗邻的F元素

<style>
    p~h1{background: red;}
</style>

<body>
    <h1>h</h1>
    // p标签之后的两个h1标签均变为红色
    <p>p1</p>
    <h1>red</h1>
    <h1>red</h1>
</body>

文本相关的伪类：E:first-line表示E元素中的第一行，E:first-letter:表示E元素中的第一个字符， E::selection表示E元素在用户选中文字时

<style>
    p {widht: 300px; height: 300px; border: 1px solid black; font: 10px "微软雅黑"; padding: 10px;}
    p: first-line{ background: red;}
    p: first-letter{font-size: 30px;}
    p::selection{background#F60; color: #690;}
<style>
<body>
<p>hahaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>

E::before生成内容在E元素前，E::after生成内容在E元素后
E:(not)排除掉某一项，讲解代码如下：

<style>
    h1:not(.h2）{background: red;}
</style>
<body>
    <h1>h1</h1>
    <h1 class="h2>h1</h1>
    <h1>h1</h1>
</body>

css3新增颜色模式
- rgba: r:red, g: green, b: blue, a:alpha(可以解决一个问题：单纯的给某个标签设置透明度造成里面的全部都透明度改变了，所以可以通过rgba来改变透明度)
- 文字阴影：text-shadow: 0 0 10px red; 分别是水平方向，垂直方向，模糊程度，颜色
- 多层阴影： text-shadow: 0 0 10px blue, 10px 10px 10px green;
- text-shadow: x y blur color; x:横向偏移， y:纵向偏移，blur: 模糊距离， color: 阴影颜色
- 文字方向： direction: rtl; 一定要配合unicode-bidi使用，即:unicode-bidi:bidi-override;
- 省略文本的处理方式： text-overflow: clip（无省略号）ellipse（省略号）；注意配合：overflow:hidden和white-space:nowrap一起使用；
- 自定义文字，转换字体格式生成兼容代码：http://www.fontsquirrel.com/fontface/generator
- ```
@font-face {
    font-family: ‘miaov';
    src: url('111-webfont.eot');
    src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
         url('111-webfont.woff') format('woff'),
         url('111-webfont.ttf') format('truetype'),
         url('111-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
```