cssattr（cssattr函数）

本篇文章给大家谈谈cssattr，以及cssattr函数对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css选择符的选择符分类介绍
• 2、css的高级选择器
• 3、css中repeat-x与repeat-y什么意思。结合例子给我说明一下，谢谢
• 4、CSS选择器与优先级详解（一）
• 5、css有哪些选择器
• 6、如何在ueditor中获取选中元素的css/attr等

css选择符的选择符分类介绍

1.通配选择符

语法：

* { sRules }

说明：

通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。

假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。

示例：

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2.类型选择符

语法：

E { sRules }

说明：

类型选择符。以文档语言对象(Element)类型作为选择符。

示例：

td { font-size:14px; width:120px; }

a { text-decoration:none; }

3.属性选择符

语法：

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

说明：

属性选择符。

选择具有 attr 属性的 E

选择具有 attr 属性且属性值等于 value 的 E

选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格

选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

示例：

h{ color: blue; } /* 所有具有title属性的h对象 */ span[class=demo] { color: red; } div[speed=fast][dorun=no] { color: red; } a[rel~=copyright] { color:black; } 4.包含选择符语法：E1 E2 { sRules }说明：包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。 示例：　山扰table td { font-size:14px; }

div.sub a { font-size:14px; }

5.子对象选择符

语法：

E1 E2 { sRules }

说明：

子对象选择符。选择所有作为 E1 子对象的 E2 。

示例：

body p { font-size:14px; }

/* 所有作为body的子对象的p对象字体尺寸为14px */

div ulli p { font-size:14px; }

6.ID选择符

语法：

#ID { sRules }

说明：

ID选择符。以文档肆拿目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。

示例：

#note { font-size:14px; width:120px;}

7.类选择符

语法：

E.className { sRules }

说明：

类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。请参阅属性选择符( Attribute Selectors )。

在IE5+，可以为对象的 class 属性逗雹旦(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：div class=class1 class2。

示例：

div.note { font-size:14px; }

/* 所有class属性值等于（包含）note的div对象字体尺寸为14px */

.dream { font-size:14px; }

/* 所有class属性值等于（包含）note的对象字体尺寸为14px */

8.选择符分组

语法：

E1 , E2 , E3 { sRules }

说明：

选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。

示例：

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px; }

9.伪类及伪对象选择符

语法：

E : Pseudo-Classes { sRules }

E : Pseudo-Elements { sRules }

说明：

伪类及伪对象选择符。

伪类选择符。请参阅伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。

伪对象选择符。请参阅伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。

示例：

div:first-letter { font-size:14px; }

a.fly :hover { font-size:14px; color:red; }

[img]

css的高级选择器

1.后代选择器：E F 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

  styleul  li{

            color: red;   } /style

ul

        li我是ul里面的li/li

        li我是ul里面的li/li

        li我是ul里面的li/li

    /ul  li是ul的孙子级别

    ul

       p li我是ul里面的li/li/p

        p li我是ul里面的li/li/p

        p li我是ul里面的li/li/p

    /ul  li是ul的孙子级别

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入，空格可以多 但是不可以插入其他的符号以免造成干扰。 li 被 ul包裹的情况下 颜色变红

2.子选择器：EF 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

  style div span{

            color: red;   }

        h2 span{ color: green; } /style

 div

     pspan早上好/span/p

        ph1span我是标题/span/h1/p

        h2span晚上好/span/h2

    /div

div元素中包裹的子元素span 显示为红色，h2元素中包裹的子元素span显示为绿色， 左右可以添加空格

3.相邻选择器： E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

 style .main+p{

            background: green; } /style

div     p我是谁/p

        p class="main"我是谁/p

        p我是谁/p     /div

类选择器main相邻的下一个p背景色变绿

4.通用选棚渗档择器：E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

style  .ab~p{

    background: red;} /style

div    p class="ab"111/p

        p222/p

        p 333/p

        p444/p

        p555/p    /div

类选择器ab下面的所有p标签都会变成红色

1.E[attr]属性选择器： E[attr]  选择匹配具有属性attr的E元素

style  dd[class]{

      background: red; }  /style

 dl  dt汽车/dt

        dd宝马/dd

   链乱     dd class奔驰/dd

        dd奥迪/dd   /dl

 [ ]表示属性的意思 里面写具体属性的名称比如 [id]

2.E[attr=val]属性选择器:E[attr=val]  选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

style   dd[class=two]{

            background: red;   } /style

dl  dt标题/dt

        dd class="one"我是定义列表1/dd

        dd class="one"我是定义列表1/dd

        dd class="two"我是定义列表喊搏2/dd   /dl

E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中,dd元素中class的值为two的背景颜色变成红色

3.E[attr*=val]属性选择器: 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”

   dd[class=two]{style p[class*=b]

属性后面的值加不加引号（包括单引号和双引号）都可以 当时遇到特殊符号需要加引号

            background: red;   } /style

div  p 111/p

        p class="b1"222/p

        p class="b2"333/p   /div

p元素中class的值只要包含b的背景色都会变成红色,

4.E[attr^=val]属性选择器:E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

style  a[href^='http://']{

            background:red;  } /style

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下

a href=""跳转百度/a

    a href=""不能跳转百度/a

表示 属性href是以http开头的a元素 背景色变成红色

5.E[attr$=val]属性选择器:E[attr$=val]  选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

  a[href^='http://']{style a[href$=".cm"]

            background:red;  } /style

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下

a href=""能跳百度/a

    a href=""因为百度把.cm的域名也买了所以也能跳了/a

表示 属性href是以cn结尾的a元素 背景色变成红色

css中repeat-x与repeat-y什么意思。结合例子给我说明一下，谢谢

repeat-x是横向铺满，就是在乱陪#header.nav-box中，图片nav-box-bg.gif会埋脊横向重复，直到铺满。

repeat-y是纵向，就是在#header.nav-box中，图片nav-box-bg.gif会竖向重复，直到铺满。

如果想要横轴和竖轴都平铺的话，直接用background-repeat:repeat;就可以了。

扩展资料：

css参考函数

attr() 返回所选元素的属性值

hsl() 使用Hue-Saturation-Lightness模型（HSL）定义颜色

hsla() 使用Hue-Saturation-Lightness-Alpha模型（HSLA）定义颜色

linear-gradient() 将线性渐变设置为哗液蠢背景图像。 定义至少两种颜色（从上到下）

radial-gradient() 将径向渐变设置为背景图像。 定义至少两种颜色（中心到边缘）

参考资料来源：百度百科-CSS （层叠样式表）

CSS选择器与优先级详解（一）

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性镇茄值构成一个整体。

1.基础选择器

a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

HTML

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。

HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。

HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。

CSS3新增了一些属性选择器，待持续更新。

3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依御兄察次是：

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值尘咐表述为4个部分，用0,0,0,0表示。

参考：

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

css有哪些选择器

CSS中常用的选择器：

（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器

（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素

(一)基本选择器

1.标签选择器：通过标签名获取元素 权重：0001

（此种选择器影响范围大，建议尽量应用在层级选择器中。）

2.class选择器：通过 . 类名获取元素 权重：0010

（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）

3.id选择器：通过 # id名获取元素 权重：0100

（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）

4. * 通配符选择器：获取到页面的所有元素

5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到

(二)层次/关系选择器

（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）

1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代

例：p a { color:red; }

2.子代选择器：用隔开基本选择器，表示后一个选择器是前面的子代

例：ulli { line-style: none; }

3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）

例： a+a { }

4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素燃岁

例： li~li { }

(三）动态伪类选择器

1. a:link 锚链接被访问前添加样式

2. a:visited 锚链接被访问后添加样式

3. e:hover 鼠标悬停在元素上添加样式

4. e:active 鼠标点击元素时添加样式

5. :focus 表单元素被聚焦时，添加样式

(四)目标伪类选择器

语法： 目标:target {属性：属性值} 被选中的目标添加样式

目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式

(五)ui状态伪类选择器

1. :enabled 可用的表单元素添加样式

2. :disabled 不可用的表单元素添加样式(disabled )

3. :checked+E 被选中的表单元素添加样皮森睁式

(六)结构伪类选择器

1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。

2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子

3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子

n的春启用法：

(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”）

(3) -n+5 选中1-5

(4)p:nth-child(-n+3):nth-child(n+2) 2-3个

4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子

5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子

6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子

8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

9. E:empty 获取到空的E元素（注：连空格都不能有）

(七)属性选择器

1. E[attr] 拥0有attr属性的E元素添加样式 如div[class];

2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]

3. E[attr*="val"] attr属性值 包含 val的E元素添加样式

如ul[class="c"] 指class类名中包含有c字母的E元素

4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式

5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式

(八)伪元素

1. E::before给E元素添加第一个子元素 （前面）

2. E::after 给E元素添加最后一个子元素（后面）

3. E::first-letter给E元素第一个字添加样式

4. E::first-line给E元素第一行添加样式

5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

如何在ueditor中获取选中元素的css/attr等

参考 百度UEditor在线编辑器

getStyle 获取元素element的某个样式值

UE.dom.domUtils.getStyle(element,name) ⇒ String

第一个参数是元素，第二个参数是需要拿唤获取的陵敏伍样式名称尺或

关于cssattr和cssattr函数的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。