神奇的CSS3选择器

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

 Css3选择器

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

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

属性选择器

  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.

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

  1. 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>
 
时间: 2024-10-05 20:47:56

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

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为“id”的任意类型元素 .class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E  F 后代选择器(包含选择器

CSS3选择器:nth-child和:nth-of-type之间的差异(转)

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 参考文章:The Difference Between :nth-child and :nth-of-type 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s

[Selenium] CSS3 选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 e

CSS3选择器:nth-child和:nth-of-type之间的差异——张鑫旭

一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section> 然后两个选择器相对应的CSS

CSS3选择器介绍

1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style type="text/css"> /* id包含div字符串*/ [id*=div] { color: lime; } /*开始字符串为div*/ [i