LESS中的css选择器用于伪类使用（css类选择器怎么用）

25-03-21 6

在本文中，我们将为您详细介绍LESS中的css选择器用于伪类使用的相关知识，并且为您解答关于css类选择器怎么用的疑问，此外，我们还会提供一些关于CSS-Less类使用伪类扩展类、CSS3中的结构伪元

在本文中，我们将为您详细介绍LESS中的css选择器用于伪类使用的相关知识，并且为您解答关于css类选择器怎么用的疑问，此外，我们还会提供一些关于CSS-Less类使用伪类扩展类、CSS3中的结构伪元素选择器和伪类选择器的使用、CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css_WEB-ITnose、CSS中id和class选择器怎么使用的有用信息。

本文目录一览：

LESS中的css选择器用于伪类使用（css类选择器怎么用）
CSS-Less类使用伪类扩展类
CSS3中的结构伪元素选择器和伪类选择器的使用
CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css_WEB-ITnose
CSS中id和class选择器怎么使用

LESS中的css选择器用于伪类使用（css类选择器怎么用）

假设我有一组我想要应用伪类的元素,有没有办法在变量中定义多个元素,然后一次将伪类应用于所有这些元素？像这样：

@inputs: input[type=text],input[type=email],input[type=password],textarea;

@inputs {
    //some styles;
}

@inputs:focus{
    //some focus-specific styles;
}

抱歉,如果这太明显了,我对LESS来说是新的

最佳答案

我不确定你是否可以这样做,但这也有效.我假设你只想写一次long伪类.

input[type=text],textarea {
   // styles for normal

   &:focus {
      // styles for focus
   }

   &:hover {

   }
}

CSS-Less类使用伪类扩展类

我想知道如何用更少的CSS来做如下的事情：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

当然,这只是一个例子,需要指出的是,如果有任何方法来扩展伪类,以避免重新键入以下属性：hover伪类,我需要它.我知道我可以为此创建一个mixin,但我想知道是否可以避免.

谢谢

解决方法

更新：
如果您无法修改外部文件,只需重新定义选择器,并添加缺少的状态：

.btn {
  // not adding anything here,won't affect existing style
  &:hover {
    // adding my own hover state for .btn
    background: yellow;
    ...
  }
}

// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

现在好多了？

总结

以上是小编为你收集整理的CSS-Less类使用伪类扩展类全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

CSS3中的结构伪元素选择器和伪类选择器的使用

伪元素选择器属性介绍

•伪元素主要作用就是操作元素的文本和添加内容

•伪元素使用说明表

属性描述 X:first-letter 设置X元素中的第一个字。 X:first-line 设置X元素中的第一行字 X::before 在X元素最前面添加内容。 X::after 在X元素最后面添加内容。

first-letter实践：

•使用first-letter属性设置div文本第一个字颜色为红色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div:first-letter {
           color: red;
       }
   </style>
</head>
<body>
    <div>
        从你的全世界路过
    </div>
</body>
</html>

效果图：

first-line实践：

•使用first-line属性设置div标签的文本第一行字颜色为红色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div:first-line {
           color: red;
       }
   </style>
</head>
<body>
    <div>
        从你的全世界路过<br />
        从你的全世界路过<br />
        从你的全世界路过<br />
    </div>
</body>
</html>

效果图：

before实践

• 使用before属性设置div标签的文本前面添加“牛奶咖啡”2个字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div::before {
           content: "牛奶咖啡：";
       }
   </style>
</head>
<body>
    <div>从你的全世界路过</div>
</body>
</html>

效果图：

after实践

•使用after属性设置div标签的文本最后面添加“牛奶咖啡”2个字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div::after {
           content: "牛奶咖啡：";
       }
   </style>
</head>
<body>
    <div>从你的全世界路过</div>
</body>
</html>

效果图：

结构伪类选择器介绍

• 结构伪类选择器是用来处理一些特殊的效果。

•结构伪类选择器属性说明表

属性描述 X:first-child 匹配X元素的第一个子元素 X:last-child 匹配X元素的最后一个子元素。 X:nth-child(n) 匹配X元素的第n个子元素 X:nth-child(2n)或者x:nth-child(even) 匹配X元素的偶数子元素。 X:nth-child(2n+1)或者x:nth-child(odd) 匹配X元素的奇数子元素。 X:only-child 匹配X元素中仅有一个的子元素。

first-child实践:

•使用first-child属性设置div第一个标签文本颜色为蓝色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪元素选择器</title>
<style>
div{
width:200px;
height:30px;
background:red;
text-align:center
}
div:first-child {
color:blue
}
</style>
</head>
<body>
<div>从你的全世界路过</div>
<div>从你的全世界路过</div>
<div>从你的全世界路过</div>
</body>
</html>

效果图：

last-child实践：

•使用last-child属性设置div最后一个标签文本颜色为蓝色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div{
           width:200px;
           height:30px;
           background:red;
            text-align:center
       }
           div:last-child {
               color: blue
           }
   </style>
</head>
<body>
    <div>从你的全世界路过</div>
    <div>从你的全世界路过</div>
    <div>从你的全世界路过</div>
</body>
</html>

　效果图：

nth-child实践

•使用nth-child(n)属性设置div标签中的第四个lable标签文本颜色为蓝色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div {
           width: 146px;
           height: 100px;
           background: red;
           text-align: center
       }
           div label:nth-child(4) {
               color: blue;
           }
   </style>
</head>
<body>
    <div>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
    </div>
    
</body>
</html>

效果图：

nth-child(2n)实践：

•使用nth-child(2n)属性设置div标签中的偶数标签文本颜色为蓝色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div {
           width: 146px;
           height: 100px;
           background: red;
           text-align: center
       }
           div label:nth-child(2n) {
               color: blue;
           }
   </style>
</head>
<body>
    <div>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
    </div>
    
</body>
</html>

效果图：

•使用nth-child(2n+1)属性设置ul标签中的奇数li标签文本颜色为红色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       div {
           width: 146px;
           height: 100px;
           background: red;
           text-align: center
       }
           div label:nth-child(2n+1) {
               color: blue;
           }
   </style>
</head>
<body>
    <div>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
        <label>从你的全世界路过</label>
    </div>
    
</body>
</html>

　　效果图：

only-child实践：

•使用only-child属性设置ul标签中的仅有一个li标签文本颜色为红色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>伪元素选择器</title>
   <style>
       ul li:only-child {
           color: red;
       }
   </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul>
        <li>就我一个li标签</li>
    </ul>
</body>
</html>

　　效果图：

CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css_WEB-ITnose

《CSS3基本选择器》

                      <p>                          <p>        一、通配符选择器（＊）       </p>                          <p>        *{       </p>                          <p>        marigin: 0;       </p>                          <p>        padding: 0;       </p>                          <p>        }       </p>                          <p>       </p>                          <p>        二、元素选择器(E)       </p>                          <p>        li {background-color: grey;color: orange;}       </p>                          <p>       </p>                          <p>        三、类选择器（.className）       </p>                          <p>       </p>                          <p>        四、id选择器（#ID）       </p>                          <p>        #first {background: lime;color: #000;}       </p>                          <p>        #last {background: #000;color: lime;}       </p>                          <p>       </p>                          <p>        五、后代选择器（Ｅ Ｆ）       </p>                          <p>        .demo li {color: blue;}       </p>                          <p>       </p>                          <p>        六、子元素选择器(E>F)       </p>                          <p>        ul > li {background: green;color: yellow;}       </p>                          <p>       </p>                          <p>        七、相邻兄弟元素选择器(E + F)       </p>                          <p>        li + li {background: green;color: yellow; border: 1px solid #ccc;}       </p>                          <p>       </p>                          <p>        八、通用兄弟选择器（Ｅ ? Ｆ）       </p>                          <p>        .active ~ li {background: green;color: yellow; border: 1px solid #ccc;}       </p>                          <p>       </p>                          <p>        九、群组选择器（selector1,selector2,...,selectorN）       </p>                          <p>        .first, .last {background: green;color: yellow; border: 1px solid #ccc;}       </p>                      </p>

登录后复制

《CSS3属性选择器》

css3的属性选择器主要包括以下几种：

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

                              <p>                                  <p>          .demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中         </p>                                  <p>          .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中         </p>                              </p>

登录后复制

《CSS3伪类选择器》

1、这是最常用的动态伪类

                      <p>                          <p>        .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/       </p>                          <p>        .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/       </p>                          <p>        .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/       </p>                          <p>        .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/       </p>                      </p>

登录后复制

2、UI元素状态伪类

":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用；

IE6-8不支持":checked",":enabled",":disabled"这三种选择器

3、:nth选择器

:fist-child选择某个元素的第一个子元素；

:last-child选择某个元素的最后一个子元素；

:nth-child()选择某个元素的一个或多个特定的子元素；

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type()选择指定的元素；

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

:first-of-type选择一个上级元素下的第一个同类子元素；

:last-of-type选择一个上级元素的最后一个同类子元素；

:only-child选择的元素是它的父元素的唯一一个了元素；

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty选择的元素里面没有任何内容。

IE6-8和FF3-浏览器不支持":nth-child，:nth-last-child()，：nth-of-type"选择器

4、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现

                  <p>                      <p>       input:not([type="submit"]) {border: 1px solid red;}      </p>                  </p>

登录后复制

5、伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个。

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用， 见过最多的就是清除浮动

                  <p>                      <p>       .clearfix:before,      </p>                      <p>       .clearfix:after {      </p>                      <p>       content: ".";      </p>                      <p>       display: block;      </p>                      <p>       height: 0;      </p>                      <p>       visibility: hidden;      </p>                      <p>       }      </p>                      <p>       .clearfix:after {clear: both;}      </p>                      <p>       .clearfix {zoom: 1;}      </p>                  </p>

登录后复制

《CSS选择器优化》

固有效率：

id选择器（#myid）

类选择器（.myclassname）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）

CSS中id和class选择器怎么使用

我经常使用id和class来指定应用样式的范围。但是，很难确定是否正确使用id或class，本篇文章我们就来介绍一下id和class的的用法。

id和class之间的区别

id具有唯一性，class可以有很多个

页面中只能写入一个ID，但是对于class可以写入多个。

立即学习“前端免费学习笔记（深入）”；

但是，这并不意味如果页面只显示一个就必须使用id。id的使用存在约束。

如果id和class有样式冲突，则id优先

让我们举一个例子来看一下。

HTML

<p id="red">ID和class优先级比较——文字颜色</p>

登录后复制

CSS

#red{
color:red;
}
.blue{
color:blue;
}

登录后复制

效果如下：

360截图20181117113530790.jpg

上图显示的字体是红色的，那是因为id的优先级比class的优先级高，所以最终显示的颜色是红色。

可以在页面内跳转到id

通过链接到id，您可以跳转到相应的id位置。

<a name="#ananker name">跳转到id </a>

登录后复制

经常利用这个在页面开头设置跳跃功能。

可以在哪里使用id

首先，作为大前提，class的使用没有限制，但是id有约束。

坦白地说，经常也可以这样做，即使你在没有使用id的情况下用class描述的话也没有问题，因此，与其考虑如何区分使用，不如考虑在哪里使用id。

使用id的地方是“唯一的”或者是“最好做的”。

当你想要添加页内跳转功能时

使用页内跳转功能时，请使用id，因为它无法用class实现。

用于可以设置“唯一”的地方

页面中基本上只有一个页面部分，例如标题，内容，侧边栏，页脚。这样的东西利用id比较容易实现。

总结class中的常用部分，用id覆盖样式

这是一种利用CSS的规格，其中id优先于class。

网页根据页有一定的布局，但是有很多相似的部分。您可以通过将标准样式编写为class并使用id编写每个页面的特征部分来压缩CSS。

id的选择器匹配过程更快

当使用jQuery等执行选择器匹配处理时，指定id时速度更快。这是因为，如果它是由id指定的，那么在页面中找到它就可以完成处理，而如果是class的话则需要扫描到结尾。

以上就是CSS中id和class选择器怎么使用的详细内容，更多请关注php中文网其它相关文章！

关于LESS中的css选择器用于伪类使用和css类选择器怎么用的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于CSS-Less类使用伪类扩展类、CSS3中的结构伪元素选择器和伪类选择器的使用、CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）_html/css_WEB-ITnose、CSS中id和class选择器怎么使用的相关信息，请在本站寻找。

本文标签：