精华内容
下载资源
问答
  • CSS选择器

    千次阅读 2014-09-20 17:07:21
    一、CSS有多少选择器 CSS选择器分为五类: (1)元素选择器(4个) (2)关系选择器(4个) (3)属性选择器(7个) (4)伪类选择器(26个) (5)伪对象选择器(5个) 1. 元素选择器(4个) ...

    一、CSS有多少选择器

    CSS选择器分为五类:

    (1)元素选择器(4个)

    (2)关系选择器(4个)

    (3)属性选择器(7个)

    (4)伪类选择器(26个)

    (5)伪对象选择器(5个)


    1. 元素选择器(4个)
    选择器
    名称
    版本
    兼容性(>=)
    简介
    *
    通配符选择器
    CSS2
    IE7

    E
    元素选择器
    CSS1
    IE6

    #id
    id选择器
    CSS1
    IE6

    .class
    类选择器
    CSS1
    IE6


    2. 关系选择器(4个)
    选择器
    名称
    版本
    兼容性(>=)
    简介
    E  F
    后代选择器 CSS1 IE6
    E的所有后代F
    E > F
    直接子元素选择器 CSS2 IE7
    E的直接子元素F
    E + F
    相邻兄弟选择器 CSS2 IE7
    紧贴在E之后的F,E与F之间没有其他元素
    E ~ F
    兄弟选择器 CSS2
    IE7
    E之后的所有兄弟F

    3. 属性选择器(7个)
    选择器
    名称
    版本
    兼容性(>=)
    简介
    E[attr]

    CSS2 IE7
    有attr属性的元素E
    E[attr="val"]

    CSS2 IE7 有attr属性并且其值为val的元素E
    E[attr~="val"]

    CSS2 IE7
    attr的值以1个或多个单词组成,其中一个为val
    E[attr^="val"]

    CSS3
    IE7
    attr的值为以val开头的字符串包括多个单词的形式
    E[attr$="val"]

    CSS3
    IE7
    attr的值为以val结尾的字符串
    E[attr*="val"]

    CSS3
    IE7
    attr的值为包含val的字符串
    E[attr|="val"]

    CSS2
    IE7
    attr的值为以val-开头的字符串

    4. 伪类选择器(26个)
    选择器
    名称
    版本
    兼容性(>=)
    简介
    a:link

    CSS1 IE6
    a:visited

    CSS1 IE6
    E:active

    CSS1/2 IE6、7只支持a标签的:active
    E:hover

    CSS1/2 IE6只支持a标签的:hover
    E:first-child

    CSS2 IE7 E的父元素的第一个子元素是E
    E:last-child

    CSS3 IE9
    E:only-child

    CSS3 IE9
    E:nth-child(n)

    CSS3 IE9
    E的父元素的第n个子元素是E,其父元素的所有子元素都参与从1开始编号(与nth-of-type不同)。
    E:nth-last-child(n)

    CSS3 IE9

    E:first-of-type

    CSS3
    IE9

    E:last-of-type

    CSS3
    IE9

    E:only-of-type

    CSS3
    IE9

    E:nth-of-type(n)

    CSS3
    IE9
    同级的E元素从1开始编号连续编号,中间如果有其他元素则忽略。
    E:nth-last-of-type(n)

    CSS3
    IE9

    E:focus

    CSS1/2
    IE8
    设置对象在成为焦点(该对象的onfocus事件发生)时的样式。
    E:lang()

    CSS2
    IE8
    匹配使用特殊语言的E元素。
    E:root

    CSS3
    IE9
    匹配E元素在文档的根元素。在HTML中,根元素永远是HTML。
    E:not()

    CSS3
    IE9
    不含特定选拔器的E
    E:empty

    CSS3
    IE9
    E没有任何元素,包括text节点
    E:checked

    CSS3
    IE9
    选中状态:type=radio/checkbox时
    E:enabled

    CSS3
    IE9
    用于表单
    E:disabled

    CSS3
    IE9
    用于表单
    E:target

    CSS3
    IE9
    当前页面或其他页面从锚文本跳转到指定E时
    @page:first



    打印样式
    @page:left



    打印样式
    @page:right



    打印样式
    a伪类的正确顺序:a:link、a:visited、a:hover、a:active。

    5. 伪对象选择器(5个)
    选择器
    名称
    版本
    兼容性(>=)
    简介
    E:first-letter

    CSS1 IE7
    E::first-letter

    CSS3 IE9
    E:first-line

    CSS1 IE7
    E::first-line

    CSS3 IE9
    E:before

    CSS2 IE8
    E::before

    CSS3 IE9
    E:after

    CSS2 IE8
    E::after

    CSS3
    IE9

    E::selection

    CSS3
    IE9

    :after/::after和:before/::before要与content属性一起使用,且content的值一定要加引号。

    二、选择器的权值及优先级
    选择器的优先级是根据选择器的权值计算的。
    各选择器的权值:
    (1)继承的权值为0,继承是浏览器的行为,优先级小于用户指定。有一些样式不能被继承。
    (2)通配符的权值为0。会覆盖权值同样为0的继承样式。
    (3)元素、伪元素的权值为1。
    (4)类选择器、属性选择符(是[attr=value],不是E[attr=value])、伪类(是:hover,不是E:hover)的权值为10。
    (5)id选择器的权值为100。
    (6)!import为1000。
    (7)行间为1000。
    内联和外部引入级别相同。


    展开全文
  • <style> div[name]{ border:1px solid } </style> <div> <div name="a">1</div> <div name="b">2</div> </div>
  • css选择器种类

    千次阅读 2013-05-24 14:19:59
    CSS 选择器 CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代选择器CSS 子元素选择器CSS 相邻兄弟选择器CSS 伪类CSS 伪元素
    展开全文
  • 【元素定位】CSS选择器&XPath选择器

    千次阅读 2021-02-21 20:40:08
    文章目录CSS选择器XPATH选择器 CSS选择器 CSS教程 操作 定位CSS选择器 开发者调试模式进入Elements 找到需要定位的元素,右键Copy–>Copy selector 检查CSS选择器准确性操作 开发者调试模式进入Console ...

    CSS选择器

    CSS教程

    • 操作
      • 定位CSS选择器
        1. 开发者调试模式进入Elements
        2. 找到需要定位的元素,右键Copy–>Copy selector
      • 检查CSS选择器准确性操作
        1. 开发者调试模式进入Console
        2. 输入$(“selector”) --> 列出与selector匹配的所有元素
        3. 输入$$(“selector”) --> 把这些匹配到的元素组成了数组
    • 通过id,class等定位元素
      在这里插入图片描述
    • 通过元素之间的嵌套定位元素
      在这里插入图片描述
    • 通过元素的属性定位元素
      在这里插入图片描述
    • 通过父子关系定位元素
      在这里插入图片描述
    • 通过元素状态定位元素
      在这里插入图片描述
    • 其他
      在这里插入图片描述
    XPATH选择器

    XPath教程

    • 定义
      XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。
      获取Xpath进行元素定位
    • XML概述
      • XML 指可扩展标记语言(EXtensible Markup Language)
      • XML 是一种标记语言,很类似 HTML
      • XML 的设计宗旨是传输数据,焦点是数据的内容(HTML是显示数据)
      • XML 的标签需要我们自行定义。
      • XML 被设计为具有自我描述性。
      • XML 是 W3C 的推荐标准
    • 操作
      • 定位操作
        1. 开发者调试模式进入Elements
        2. 找到需要定位的元素,右键Copy–>Copy Xpath
      • 检查XPath准确性操作
        1. 开发者调试模式进入Console
        2. 输入$x(“XPath路径”)
    • XPath节点Node关系
      • 父(Parent)
      • 子(Children)
      • 同胞(Sibling)
      • 先辈(Ancestor)
      • 后代(Descendant)
    • XPath语法
      XPath使用路径表达式来选取 XML文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。
      • 实例文档
      <?xml version="1.0" encoding="ISO-8859-1"?>
      
      <bookstore>
      
      <book>
        <title lang="eng">Harry Potter</title>
        <price>29.99</price>
      </book>
      
      <book>
        <title lang="eng">Learning XML</title>
        <price>39.95</price>
      </book>
      
      </bookstore>
      
      • 常用路径表达式 --> 类似Linux的文件操作
        建议使用相对路径配合属性进行定位;因为绝对路径定位,如果更改了其中一个节点,无法再使用
        注意:索引以1开始
        在这里插入图片描述
        在这里插入图片描述
      • 谓语
        谓语用来查找某个特定的节点或者包含某个指定的值的节点。谓语被嵌在方括号
        在这里插入图片描述
      • 选取未知节点
        通配符* 在这里插入图片描述
        在这里插入图片描述
      • 选取若干路径
        使用“|”运算符 --> 相当于或的关系
        在这里插入图片描述
    • XPath运算符
      +
      -
      *
      div
      =
      !=
      <
      <=
      >
      >=
      or
      and
      mod
    展开全文
  • CSS3新增选择器

    千次阅读 2019-04-21 17:53:55
    都知道css有三个简单常用的选择器,#id、class和标签选择器。但是css3又新增了一些选择器,可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码,便捷开发。下面介绍: css3属性选择器 css...

    都知道css有三个简单常用的选择器,#id、class和标签选择器。但是css3又新增了一些选择器,可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码,便捷开发。下面介绍:

    1. css3属性选择器
    2. css3结构伪类选择器
    3. css3 UI伪类选择器

    1.css3属性选择器

    属性选择器语法如下(E表示标签):

    选择器 功能描述
    E[attribute] 选取带有指定属性的元素
    E[attribute=value] 选取带有指定属性和值的元素
    E[attr^=“val”] 匹配属性attr的值以指定值"val"开头的每个元素
    E[attr$=“val”] 匹配属性attr的值以指定值"val"结尾的元素
    E[attr*=“val”] 匹配属性attr的值包含字符串"val"元素

    例如如下实例,查找属性值href以http开头的元素,并使其背景颜色为yellow:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		p{
    			margin: 10px;
    		}
    		/*查找含有href属性为http的a元素*/
    		/*a[href^="http"]{
    			background-color: yellow;
    		}*/
    
    		/*a[href$="pdf"]{
    			background-color: pink;
    		}*/
    
    		/*a[href*="age"]{
    			background-color: orange;
    		}*/
    
    	</style>
    </head>
    <body>
    	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    	<p><a href="http://www.baidu.com/name.svg">SVG</a></p>
    	<p><a href="http://www.baidu.com/name.ppt">PPT文件</a></p>
    	<p><a href="http://www.baidu.com/age.xls">age.XLS文件</a></p>
    	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    	<p><a href="www.baidu.com/name.pdf">PDF文件</a></p>
    	<p><a href="http://www.baidu.com/age.gif">age.GIF文件</a></p>
    	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    </body>
    </html>
    

    上面注释逐一放开效果如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.css3结构伪类选择器

    结构伪类选择器是css3中新增的选择器,主要作用是通过文档结构的先后关系来匹配特定的元素,从而减少结构代码中ID属性和class属性的定义,使得文档更简洁。

    结构伪类选择器语法:
    下方语法中n不能以0开头,123…,也可以是其他关键字如odd奇数、even偶数。也可以使用2n表示偶数,2n+1表示奇数。

    选择 功能描述
    :root 选择匹配文档的根元素
    E:nth-child(n) 选择所有在其父元素中的第n个位置的匹配E的子元素
    E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
    E:nth-of-type(n) 选择所有在其父元素中同类型第n个位置的匹配E的子元素
    E:nth-last-of-type(n) 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素
    E:last-child 选择位于其父元素中最后一个位置,且匹配E的子元素 ,与E:nth-last-child(1)等同
    E:fisrt-child 选择位于其父元素中第一个位置,且匹配E的子元素 ,与E:nth-child(1)等同
    E:first-of-type 选择在其父元素中匹配E的第一个同类型子元素
    E:last-of-type 选择在其父元素中匹配E的最后一个同类型子元素
    E:only-child 选择在其父元素中只包含一个子元素,且该子元素匹配E。
    E:only-of-type 选择在其父元素中只包含一个同类型子元素,且该子元素匹配E。
    E:empty 选择匹配E的元素,且该元素不包含子元素。

    实例效果如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		th{
    			height: 30px;
    		}
    		td{
    			height: 20px;
    		}
    		td, th{
    			border: 1px solid #cad9ea;
    			padding: 0 1em 0;
    		}
    		/*匹配文档的根元素*/
    		/*:root{
    			background-color: red;
    		}*/
    		/*匹配在其父元素中第二个位置匹配tr的子元素*/
    		/*tr:nth-child(2){
    			background-color: #ff0000; 
    		}*/
    		/*在其父元素table中倒数第2个位置的匹配tr的子元素*/
    		/*tr:nth-last-child(2){
    			background-color: yellow;
    		}*/
    		/*每一个tr中的最后一个td*/
    		/*td:last-child{
    			background-color: blue;
    		}*/
    	</style>
    </head>
    <body>
    	<table>
    		<tr>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>班级</th>
    			<th>成绩</th>
    		</tr>
    		<tr>
    			<td>1111</td>
    			<td>2222</td>
    			<td>3333</td>
    			<td>4444</td>
    		</tr>
    		<tr>
    			<td>1111</td>
    			<td>2222</td>
    			<td>3333</td>
    			<td>4444</td>
    		</tr>
    		<tr>
    			<td>1111</td>
    			<td>2222</td>
    			<td>3333</td>
    			<td>4444</td>
    		</tr>
    		<tr>
    			<td>1111</td>
    			<td>2222</td>
    			<td>3333</td>
    			<td>4444</td>
    		</tr>
    	</table>
    	
    </body>
    </html>
    

    在这里插入图片描述
    对于上面表格,如果设置结构伪类选择器的效果:

    1. :root

      /*匹配文档的根元素*/
      :root{
      		background: red;
      	}
      

      在这里插入图片描述

    2. :nth-child(2):父元素table中第二个配置tr的

      /*匹配在其父元素中第二个位置匹配tr的子元素*/
      tr:nth-child(2){
      	background-color: #ff0000; 
      }
      

      在这里插入图片描述

    3. nth-last-child(2)

      /*在其父元素table中倒数第2个位置的匹配tr的子元素*/
      tr:nth-last-child(2){
      	background-color: yellow;
      }
      

      在这里插入图片描述

    4. :last-child

      /*每一个tr中的最后一个td*/
      td:last-child{
      	background-color: blue;
      }
      

      在这里插入图片描述
      结构伪类选择器使用方法就是这样。

    3.UI伪类选择器

    css3中共定义了11中UI伪类选择器。如下:
    在这里插入图片描述
    实例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		/*input[type="text"]:enabled{
    			background-color: #ffff00;
    		}*/
    
    		/*input[type="text"]:disabled{
    			background: pink; 
    		}*/
    
    		/*input:required{
    			background: #ff5aba; 
    		}*/
    
    		/*input:read-only{
    			background: blue; 
    		}*/
    
    		/*::selection{
    			color: red; 
    		}*/
    	</style>
    </head>
    <body>
    	<form action="#" name="myform" method="get">
    		name: <input type="text" name="xiaohua"><br>
    		country: <input type="text" disabled="disabled" value="china"><br>
    		<input type="radio" checked="checked" value="male"><br>
    		<input type="radio" value="female"><br>
    		
    		<p>普通的input元素:<br><input value="hello"></p>
    
    		<p>只读的input元素:<br><input readonly="" value="hello"></p>
    		
    		<div>这是div元素的文本:</div>
    		<input type="number" min="1" max="10" value="6">
    		<p>可选择的input元素: <br><input type="text"></p>
    
    		<p>必填的input元素: <br><input required type="text"></p>
    		
    		<input type="email" value="w1418899@163.com">
    	</form>
    </body>
    </html>
    
    

    在这里插入图片描述
    将上面注释逐一放开效果如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    每天进步一点点、充实一点点、加油!

    展开全文
  • CSS选择器——cssSelector定位方式详解

    千次阅读 2018-06-19 22:59:44
    基本css选择器CSS选择器中,最常用的选择器如下:选择器描述举例*通配选择器,选择所有的元素*&lt;type&gt;选择特定类型的元素,支持基本HTML标签h1.&lt;class&gt;选择具有特定class的元素。.class1...
  • CSS属性选择器

    千次阅读 2018-01-24 14:43:37
    CSS属性选择器 CSS属性选择器即是通过html的属性来选择元素,下面来分别看下CSS的几种元素选择器。 1.E[att] 选择具有att属性的E元素 input[type]{height: 40px;background-color:red;} ""> type="text" ...
  • CSS选择器

    千次阅读 2018-03-13 16:33:15
    1.伪类选择器CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。伪类选择器作用应用对象:hover定义标记在鼠标悬停(划过)时的样式所有显示标记:link定义标记在超链接状态下的样式a标签:focus定义标记在获取...
  • CSS 选择器

    2019-06-30 17:30:41
    CSS 选择器:标签选择器、id 选择器、类选择器、通配符选择器、并集选择器、交集选择器、后代选择器、子代选择器、属性选择器
  • CSS选择器用法:
  • CSS完整选择器参考 CSS 选择器 CSS选择器用于选择你想要的元素的样式的模式。 “CSS”列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...
  • JQuery选择器CSS选择器

    千次阅读 2017-12-07 20:47:53
    核心选择器 语法 描述 * 选择所有元素 选择特定类型的元素 . 选择具有特定class的元素 <type>. 选择具有特定class的某类元素 ‘#id 选择具有特定id属性值的元素 属性选择器 语法 描述 [attr] 选取...
  • css选择器权重及其计算规则

    千次阅读 2019-04-23 08:38:40
    css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID #id class .class 标签 p 通用 * 属性 [type=“text”] 伪类 :hover 伪...
  • CSS】复合选择器

    2018-04-03 14:54:52
    CSS基础选择器 基础选择器比较简单,主要有标签选择器(元素选择器),类选择器,多类名选择器,ID选择器,通配符选择器。以上都比较简单,在这里我们主要说一下复合选择器 CSS复合选择器 复合选择器是由...
  • Css选择器

    千次阅读 2016-05-26 16:40:56
    CSS3 选择器CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。) 选择器 例子 例子描述 CSS ...
  • CSS3的新增选择器示例-属性选择器

    千次阅读 2017-07-09 11:51:33
    一. CSS3概述css3是css2的升级版本,新增了许多特性,弥补了css2的众多不足之处。css3许多查找元素的方法,极大的提高... css3中对属性选择器元素元素的查找提供了五种形式 1.1 E[attr] 表示存在attr属性即可找到<!DOCT

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,220
精华内容 23,688
关键字:

选择器css