Question

我正在维护一个包含将近120.000页的网站。我正在为主页设置新布局，因此我需要使每个类都唯一，这样网站的其余部分都不会受到影响。

如果我想让一个<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:id="@+id/postCard" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.56" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/postImage" android:layout_width="65dp" android:layout_height="65dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:src="@drawable/default_avatar" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/postUsername" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="Username" android:textStyle="bold" app:layout_constraintStart_toEndOf="@+id/postImage" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/postDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:text="Datee" android:textStyle="italic" app:layout_constraintStart_toEndOf="@+id/postImage" app:layout_constraintTop_toBottomOf="@+id/postUsername" /> <ImageView android:id="@+id/postBigImage" android:layout_width="0dp" android:layout_height="256dp" android:scaleType="centerCrop" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/postImage" tools:srcCompat="@tools:sample/avatars[3]" /> <TextView android:id="@+id/postDesc" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:text="TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/postBigImage" /> </android.support.constraint.ConstraintLayout> </android.support.v7.widget.CardView> </android.support.constraint.ConstraintLayout>标签唯一，我该怎么做呢？是fx public function getChildren($parent, $level=0,$getlevel=array()) { $criteria = new CDbCriteria; $criteria->condition='referred_by_user_id=:id'; $criteria->params=array(':id'=>$parent); $count = array(0=>0); $model = $this->findAll($criteria); // $levelcount = array(); $user=User::model()->findbypk(Yii::app()->user->id); if($user->level!=$level) { foreach ($model as $key) { $count[0]++; $index=1; // echo str_repeat(' — ', $level) . $key->name . "<br />"; $children= $this->getChildren($key->id, $level+1); // pr($children);die; foreach ($children as $child) { // pr($child); if ($child==0) continue; if (isset($count[$index])) $count[$index] += $child; else $count[$index] = $child; $index++; } } } return $count; }，在CSS中是a吗？

<h1 class="foo-a">Hover on me</h1>

Answer 1

作为使任何样式声明不影响其他页面的一种可能更实用和可行的方法，只需为主页的body元素指定一个id或class，其他任何元素都没有该样式，例如<body id="this-is-the-only-true-main-page">或<body class="this-is-the-only-true-main-page">。

现在要对主页进行重新样式设置，只需在与该类/ id一起使用的任何选择器前面添加前缀即可。所以不要做

.my-class { color: red; }

你做

.this-is-the-only-true-main-page .my-class { color: red; }

此上下文选择器将确保仅影响具有.my-class 祖先元素的.this-is-the-only-true-main-page 元素。

Answer 2

我希望这是答案。因此，基本上，如果您要在一个页面中有多个链接，则要使所有链接具有独特的样式吗？

您可以为a制作class =“”，这是示例...

a {
        margin: 20px;
        -webkit-transition: color 0.5s; /* For Safari 3.0 to 6.0 */
        transition: color 0.5s; /* For modern browsers */
    }
    a:hover {
        color: #ff0000;
    }
    
 a.example01 {color:red;}
 
  a.example02 {color:green;}
  
   a.example03 {font-style:italic;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Smooth Animation of Element's Text Color</title>
<style type="text/css">
    
</style>
</head>
<body>
    <h1><a class="example01" href="#">Hover on me</a></h1>
    
    <h1><a class="example02" href="#">Hover on me</a></h1>

  <a class="example03" href="#">Hover on me</a>
</body>
</html>

Answer 3

编写CSS，使人们无需触摸HTML就可以更新网站的视觉设计，而无需触摸CSS即可编写新的html组件。

如果您会使用“ 一类一责”的原则，那么您现在不必担心。您可以通过为类添加前缀来解决影响其他页面的问题，但是CSS最终将变得不好。与创建新类相比，可以使用范围限定的CSS女巫是更好的解决方案，但是对于大型站点而言，它是不可维护的。

尝试使用@connexo提供的解决方案，如果使用Scss，则更易于维护。

Answer 4

要使任何标记/元素唯一，请将id属性添加到元素而不是类

例如

   <h1 id="foo-a">Hover on me</h1>, and in the CSS: #foo-a {etc}

使每个班级都独一无二

4 个答案: