神奇的CSS3选择器

话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。

　Css3选择器

先说下，为什么提倡使用选择器。

使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。
减少样式表的代码量。

属性选择器

　　1.[att*=val]属性选择器

　　意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        [id*=demo]

        {

            width: 100px;

            height: 100px;

            background-color: #000099;

        }

    </style>

</head>

<body>

<div id="demo"></div>

</body>

</html>

　　2.[att^=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串开头，则该元素使用这个样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        [id^=demo]

        {

            width: 100px;

            height: 100px;

            background-color: #000099;

            margin: 10px;

        }

    </style>

</head>

<body>

<div id="demo"></div>

<div id="demo1"></div>

</body>

</html>

　　3.[att$=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串结尾，则该元素使用这个样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        [id$=o]

        {

            width: 100px;

            height: 100px;

            background-color: #000099;

            margin: 10px;

        }

    </style>

</head>

<body>

<div id="demo"></div>

<div id="demooo"></div>

</body>

</html>

　　结构性伪类选择器

　　伪类选择器是指已经定义好的选择器，不能随便起名。

　　例如：a:link,a:visited,a:hover,a:active.

　　伪元素选择器是指已经定义好的为元素使用的选择器。

first-line伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       p:first-line

       {

           color: red;

       }

    </style>

</head>

<body>

  <p>

      hello world

      <br/>

      你好

  </p>

</body>

</html>

2.first-letter 伪元素选择器

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       p:first-letter

       {

           color: red;

       }

    </style>

</head>

<body>

  <p>

      hello world

  </p>

  <p> 你好</p>

</body>

</html>

befor伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       li:before

       {

           content: '*';

       }

    </style>

</head>

<body>

   <ul>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

   </ul>

</body>

</html>

after伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       li:after

       {

           content: '*';

       }

    </style>

</head>

<body>

   <ul>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

       <li>demo1</li>

   </ul>

</body>

</html>

　　root选择器

　　root选择器将样式绑定到页面的根元素。在使用：root与body元素的背景时，根据不同的条件，显示效果不同

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       :root

       {

           background-color: #003300;

       }

        body

        {

            background-color: yellow;

        }

    </style>

</head>

<body>

<p>你好</p>

</body>

</html>

　　not 选择器

　　排除结构元素下面子结构元素，使他不使用该元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body *:not(h1)

        {

            background-color: yellow;

        }

    </style>

</head>

<body>

<h1>大家好</h1>

<p>你好</p>

</body>

</html>

　　empty选择器

　　当元素内容为空时使用的样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        td:empty

        {

            background-color: yellow;

        }

    </style>

</head>

<body>

<table border="1">

    <tr>

        <td width="100px">1</td>

        <td width="100px">2</td>

        <td width="100px"></td>

    </tr>

</table>

</body>

</html>

　　target选择器

　　使用target选择器给页面中的target元素使用样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        :target

        {

            background-color:yellow;

        }

    </style>

</head>

<body>

<table border="1">

   <a href="#text3">示例1</a>

    <div id="text1">

        <h1>你好</h1>

        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

    </div>

    <div id="text2">

        <h1>你好</h1>

        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

    </div>

    <div id="text3">

        <h1>你好</h1>

        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

    </div>

</table>

</body>

</html>

　　first-child、last-child选择器

　　指定第一个子元素和最后一个子元素的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       li:first-child

       {

           background-color: yellow;

       }

        li:last-child

        {

            background-color: #009999;

        }

    </style>

</head>

<body>

<table border="1">

   <ul>

       <li>1</li>

       <li>2</li>

       <li>3</li>

       <li>1</li>

   </ul>

</table>

</body>

</html>

　　nth-child、nth-last-child选择器

　　针对父元素中某个指定序号的子元素来指定样式。

　　也可以使用Nth-child(even)对偶数子元素指定样式，Nth-child(odd)对奇数元素指定样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

       li:nth-child(2)

       {

           background-color: yellow;

       }

        li:nth-last-child(2)

        {

            background-color: #009999;

        }

    </style>

</head>

<body>

<table border="1">

   <ul>

       <li>1</li>

       <li>2</li>

       <li>3</li>

       <li>1</li>

   </ul>

</table>

</body>

</html>

　　nth-of-type nth-last-of-type选择器

　　这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷，这两个选择器只针对同类元素指定样式。

　　UI元素状态选择器

　　E:horver,E:active,E:focus选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        input[type="text"]:hover

        {

            background-color: yellow;

        }

        input[type="text"]:focus

        {

            background-color: green;

        }

        input[type="text"]:active

        {

            background-color: red;

        }

    </style>

</head>

<body>

<input type="text" name="name">

</body>

</html>

　　E:enabled,E:disabled,E:read-only,E:read-write选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        input[type="text"]:disabled

        {

            background-color: green;

        }

        input[type="text"]:read-only

        {

            background-color:darkgrey;

        }

    </style>

</head>

<body>

<input type="text" disabled>

<br>

<input type="text" >

<br>

<br>

<input type="text" readonly="readonly" >

</body>

</html>

　　E:checked、E:default选择器

　　E:checked指定复选框选取时的样式

　　E:default 指定默认选取框的样式

E::selection选择器

　　指定元素处于选中状态时的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        p::selection

        {

            background-color: goldenrod;

        }

    </style>

</head>

<body>

 <p>测试测试</p>

</body>

</html>

神奇的CSS3选择器的更多相关文章

总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
css3 选择器（三）
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器一看这个属性就知道是专为表单元素 ...
CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
CSS3选择器的研究，案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
css3 选择器（二）
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

随机推荐

Linux下c/c++项目代码覆盖率的产生方法
最近做了一系列的单元测试相关的工作,除了各种规范及测试框架以外,讨论比较多的就是关于代码覆盖率的产生,c/c++与其他的一些高级语言或者脚本语言相比较而言,例如 Java..Net和php/pytho ...
POJ 1860 Currency Exchange (SPFA松弛)
题目链接:http://poj.org/problem?id=1860 题意是给你n种货币,下面m种交换的方式,拥有第s种货币V元.问你最后经过任意转换可不可能有升值.下面给你货币u和货币v,r1是u ...
POJ1179Polygon(DP)
Polygon Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4456 Accepted: 1856 Descripti ...
HDU 2045 不容易系列之(3)—— LELE的RPG难题（递推）
题意:略. 析:首先是假设前n-2个已经放好了,那么放第 n 个时,先考虑一下第 n-1 放的是什么,那么有两种情况. 如果n-1放的是和第1个一样的,那么第 n 个就可以在n-2的基础上放2个,也就 ...
Unity3D之Mecanim动画系统学习笔记（九）：Blend Tree（混合树）
认识Blend Tree 我们在Animator Controller中除了可以创建一个State外还可以创建一个Blend Tree,如下: 那么我们看下新创建的Blend Tree和State有什 ...
.Net 揭密--JIT怎样运行你的代码
方法调用: 第一部分 (普通调用) 译者:我们都知道.NET托管代码如C#.VB.NET写成的代码,都是先被编译成中间语言(IL,Intermediate Language,在运行时,再由即时编译器( ...
Check Box 用法
void CMyDlg::OnInitDialog() //Check1 初始化为选中状态 void CMyDlg::OnInitDialog() { CDialog::OnInitDialog(); ...
Connection 连接字符串释义
本文将详细介绍如何使用Connection对象连接数据库.对于不同的.NET数据提供者,ADO.NET采用不同的Connection对象连接数据库.这些Connection对象为我们屏蔽了具体的实现细 ...
php 基本符号
用这么久了,竟然PHP的基本符号都没有认全,看到@号还查了半天才知道什么意思.把基本符号列表帖一下吧,需要的朋友可以参考~ 注解符号: // 单行注解 /* ...
JQuery ajax请求一直返回Error（parsererror）
$.ajax({ type :"post", url :"busine_in.action", timeout : 40000, data: "cen ...

神奇的CSS3选择器

神奇的CSS3选择器的更多相关文章

随机推荐

热门专题